I have this in my css based off of line25 navigation tutorial.
I added this addition to my css and would like that when a user hovers over a menu icon, it wipes away the :focus span (icon text description) and only displays :hover span text at the moment. How can that be achieved?
nav ul li a:focus span {
display: block;
}
nav ul li a:hover span {
display: block;
}
Currently the :hover text and :focus text jumble on each other.
Here is the codepen on the exact thing.
Couple of things you can do:
First Idea: Put the :hover on always on top with a solid background-color.
nav ul li a:hover span, nav ul li a:focus span {
display: block;
background: white;
width: 100%;
}
nav ul li a:hover span {
z-index: 1;
}
Or you could hide the focus one as soon as you hover over the list:
nav ul:hover li a:focus span {
display: none;
}
#navbar-lg ul li a:hover span, nav ul li a:focus span {
display: block;
}
Related
I'm using sahifa theme.I set special css for each buton on main menu.But something block my code and it's back to orjinal theme color blue.
I tried every rules
/* Altinci Menu */
.altinci-nav{
/*background-color: #866;*/
}
.altinci-nav:hover {
background-color: #8c5de4;
}
/*ul li.altinci-nav a,*/
.altinci-nav ul li a:hover,
.altinci-nav ul li a,
.altinci-nav ul li:hover > a,
.altinci-nav ul li:active,
ul li.altinci-nav:active{
background-color: #8c5de4;
}
.altinci-nav:active {
background-color: #8c5de4;
}
.altinci-nav:focus {
background-color: #8c5de4;
}
.altinci-nav:select{
background-color: #8c5de4;
}
.altinci-nav:after{
background-color: #8c5de4;
}
I look with firefox web developer tools and it's show problem that.
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover
So I make comment this lines bu nothing change
UPDATE
#main-nav ul li.current-menu-item a,
#main-nav ul li.current-menu-item a:hover{ background-color: transparent !important; }
Thank you.Claudiu D.
find your .altinci-nav:hover css rule and add a chained one for the current page like this
.altinci-nav:hover,
.altinci-nav.current-menu-item {
do the same for other links
On this site, if I inspect "What We Do", I see the HTML code:
<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a>
with CSS code:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: none;
content: '»';
color: #622C82;
}
I can't see why the content: '»' does not display. The CSS element has a width and a colour.
What is missing are the drop down indicators (indicated by the green arrows in the screen shot below)
Help appreciated.
I guess you should have a look at this class
.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 13px;
width: 16px;
}
the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.
As for the drop down indicators, they are very much present, just remove the background:none
On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .
As I can see in your code selectors .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator look almost equal.
Anyway if you want implement content attribute it's better to write something like:
.sf-sub-indicator::after {
background: none;
content: '»';
color: #622C82;
}
http://imgur.com/a/hw1kb
Background image is set for this span.
Inspect it again:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: url(images/arrow-right2.png) no-repeat;
}
I'm trying to make a dropdown menu, and I want it to show when I hover the text, but it's not working:
This is showing the submenus:
nav ul li:hover ul{
display: block; visibility: visible;
}
This si not showing the submenus:
nav ul li a:hover ul{
display: block; visibility: visible;
}
How can I make the second code work?
Try this selector:
ul li a:hover + ul
what the + does is affecting the ul right after the a tag.
Fiddle demo
I tried to check the issue multiple times in the top navigation but whenever I hover a menu the drop down always disappear. Here is the website http://dev2.websiteblue.com/vuerealestate/index.html. Any help will be appreciated. Thank you
change ul li a:hover+ul to ul li:hover a+ul
this is your final code:
ul li:hover a+ul {
display: block;
visibility: visible;
color: #9E0000;
z-index: 100;
}
Add Change ul li a:hover+ul to ul li:hover ul
Remove padding of .ul_navigation
change display: inline of .navigation > ul > li to display: inline-block
Add display: block to .navigation ul li a
Im trying to style the submenu on my wordpress menu
http://www.milknhny.co.uk/SofiaWork/
I tried
.headermenu ul ul
etc,... and it didnt work, can anyone suggest the correct class structure?
ive already tried
.headermenu ul li ul li also
thanks
Your ul's got an id attribute. Why not use it in css:
#menu-header-menu - I think it is the top-level menu.
#menu-header-menu .sub-menu - targets ALL sub menus of top-level menu.
Not sure what you are trying to customise, but the anchor text also has a background which does not help styling, so if you remove this it can help you style the list item better.
#headermenu ul ul li a {
background: none;
}
#headermenu ul ul li a:hover, ul.headermenu ul ul li:hover {
background: none;
}
Then use :
#headermenu ul ul li {
background: red ;
}
AND:
#headermenu ul ul li:hover {
background: yellow;
}