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 */
Related
I'm programming a simple wordpress page and want to change the background color of the menu bar (on the top right) when hovering over it. It's on this website: https://www.happylogo.be/.
I normally just do this with 'add additional css' which just is a css file.
The weird thing is that I beleive my selector code is right because when I add 'visibility:hidden;' It rapidly disappears and reappears again when hovering over the li items.
The css code I use now:
#menu-primary-coach li:hover{
/*#menu-primary-coach is the id of the lu*/
background-color: #c7143a !important;
}
But it doesn't work.
How can I change the background color when hovering over the menu items?
I noticed the <a>tag inside of your <li> is actually overriding the hover state with black.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
You can remove this style or also set the hover state of the <a> to your desired color.
It's caused by this line of CSS. There is a hover on the <a> within the <li>. Since the page is using xhtml the hover style should be on the <a> rather than the <li>. If you use HTML5 it can be on the <li>.
#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
background-color: #000000;
}
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.
I am trying to create a navigation menu with markup as follows:
<ul id="ul1">
<li>Link 1
**<div>**
<p>SOME STUFF</p>
<ul>
<li>Link 1.1<**div** class="innerdiv"></div></li>
<li>Link 1.2<**div** class="innerdiv"></div></li>
<li>Link 1.3<**div** class="innerdiv"></div></li>
<li>Link 1.4<**div** class="innerdiv"></div></li>
</ul>
</div>
</li>
.
.(WITH MORE <LI>'S OFC :))
.
</ul>
Now, I want to make the outer div visible when I hover on Link 1...This is easily done using CSS:
#navbar ul li div
{
min-width:500px;
min-height:130px;
background-color:#dfdfdf;
position:absolute;
left:0px;
top:32px;
visibility:hidden;
}
#navbar ul li:hover div
{
visibility:visible;
}
Next I want that inner div be visible only when I hover on inner links like link 1.1,1.2..
This is causing problems cause I'm using #(id)-selector taking the #navbar as base ID and this is causing the inner divs to inherit the css from outer div ...THAT IS TO SAY THAT WHEN I HOVER ON OUTER LINKS THE BEHAVIOUR OF THE INNER DIV CHANGE TOO WHICH I DON'T WANT...if u understand what I mean..
I WANT THAT OUTER DIV SHOULD BE VISIBLE WHEN I HOVER ON OUTER LINKS(LINK 1,2,3) AND INNER DIV BE VISIBLE WHEN I HOVER ON INNER LINKS(LINK 1.1,1.2,1.3)
SCREENSHOT OF THE NAVMENU
God this is confusing...
Kindly help in this respect by telling how to specifically select the inner div's or tell a workaround using JS or Jquery....currently I'm using the selectors
#navbar ul li div ul li div , and
#navbar ul li div ul li a:hover div
If your div is initially not displayed:
#navbar div {
display: none;
}
You can make them visible when the container LI is hovered:
#navbar li:hover > div {
display: block;
}
The > operator is used to select direct descendants, so here only the div elements that are immediate child nodes of the li that is currently being hovered will be made visible. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors
I would just change the visibillity of the list item.
ul li ul li {
....
}
Furthermore i don't see your "navbar" id anywhere? Neither a ..
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).