I made a fixed navigation bar but can't seem to determine why when you hover on the "Main Menu" and then hover the sub menu, the text of "Main Menu" doesn't change color?
#nav-top > ul > li > a:hover, .nav-top-menu-button:hover {
background-color: #fff;
color: #000;
}
JSFiddle: https://jsfiddle.net/owboLy2s/1/
You can use #nav-top > ul > li:hover > a, .nav-top-menu-button:hover instead of #nav-top > ul > li > a:hover, .nav-top-menu-button:hover. So,change is :hover should be moved one step up. Otherwise, only your <a href=''>Menu</a> code will trigger color change.
li.nav-top-menu-button:hover a{
color:#000!important;
}
This should work.
It targets your main li that contains the "Menu" link. Since the drop-down menu is still inside that li you will still be hovering it when selection a sub-link. The !important just says that it takes precedence over any other styling.
Related
I made a navigation with the help of bootstrap. With css i made a submenu that appears on hover.
Only when i want to click a title in the submenu, the submenu dissapears before i can click it.
I have read on other threads that i have to add the following to the css:
.dropdown:hover > .dropdown-menu {
display: block;
}
I added it, but it's still not working. What am i doing wrong?
This is the fiddle: http://jsfiddle.net/robin2609/buw4wc1t/
Gr. Robin
This happens because you have your padding only going down 10px and then your submenu is below the gray. while your padding does not reach the end of the main menu and therefore when the hover comes off the .nav > li > a it is now hovering just .nav which doesn't keep the sub menu open.
Change padding in:
.nav > li > a
to:
.nav > li > a
{
padding: 10px 13px 30px 13px;
}
Working JSFiddle: http://jsfiddle.net/buw4wc1t/3/
I have all li with a hover background, but is there away instead of not:lastchild like not: id1 id4 ? Cause i want some li without that hover effect.
nav ul li.selected, nav ul li:hover, nav ul li:focus{
background-color: #0047B2;
}
Just write the ID as a specific case.
nav ul li#id4 {
background-color: none;
}
you have to give all elements you want to have a hover effect a class and just specify this class in the css file.
I have a drop down menu that when I rollover a dropdown appears. The only problem is the background images of my main list also shows as the background of the submenu list.
Below is my css to assign the tab background on rollover. But I am assuming that since tech the user is still rolling over that <li> the tab background shows on all the sub <li>
CSS:
#main_menu ul li:hover a {
background: url(images/right_tab_bg.png) top right no-repeat;
color: #578ba0;
}
#main_menu ul li:hover a span {
background: url(images/left_tab_bg.png) top left no-repeat;
}
Is there a way to tell the above css to only effect the parent <a> or <span>?
Be more specific with your selectors via direct descendant selector (I am assuming that the ul that is the top level list is a direct descendant of whatever #main_menu is):
#main_menu > ul > li:hover > a /* select only the parent li's a */
#main_menu > ul > li li a /* select any child li's a, excluding the top level li */
Im working on a dropdown menu, and i want my Parent <a> to "keep its color" when i move to a child <a>.
I know how i could do it by using hover on my <li> with something like:
ul#nav li:hover > a. but that wont work here, cause i only want hover on my <a>'s...
Hope you understand my problem
Heres my jsfiddle: http://jsfiddle.net/F623k/7/
Used to this
ul#nav > li:hover > a {
color: #ff7800;
}
ul#nav li ul li a:hover {
color: #ff7800;
}
Demo
My list is not display when I hover over it. For the top navigation when I hover over English it should display more languages. http://jsfiddle.net/gTdsX
You could add in your CSS to make the ul submenu be visible on mouseover of the menu item li.
#main-nav ul li:hover ul {
display:block;
}
You didn't have a :hover style for your "main-nav". Simply add this:
#main-nav ul li:hover > ul {
display:block;
}
… and it will work (tested it in your link).