I came across this site http://northerly.com.au/ and I am wondering how it is possible to make an top menu li active while hovering over it's submenu. In this case it seems like there is no js script to add active class. How it is done then? Thank you
In fact, that's not the top menu li which is active when you're hovering on the sub menu. There is a sibling SPAN before submenu element, as a result of hovering to sub menu, you are also hovering the container li element.
top li has two elements:
a SPAN has top menu title
a Sub Menu
Use a CSS selector like this:
li:hover span {/*span is active!*/ }
See a simple demo here.
Related
This seems like a fairly straightforward thing but can't find any tutorial on it.
I have a top menu that changes background colour then one of the menu items is selected. The CSS looks like this:
.nav > li > a:hover,
.nav > li > a.selected {
background-color: #F7A379;
}
However some pages have a side menu, with a class .left-nav and when I click on those links the background styling disappears from the parent nav. Is it possible to keep the styling above when the child page is selected? If so, what would the CSS need to be?
I created a dropdown menu and made it drop on hover, but the problem is that I need to make a space between the toggle and the dropdown-menu as:
<http://jsfiddle.net/yabasha/nbbjm/1/>
When hover it displays the dropdown-menu but the problem when I want to select the menu it disappears.
Please advice,
Your problem is there is a gap between the li and the second level menu so when you are hovering, you are no longer on the li when you try to move to your submenu, which causes it to close.
You either need to move your submenu up, or extend the height of your li on hover to cover the space in between the li and the submenu
Adding the following styles to your fiddle seems to fix the problem:
.dropdown:hover {padding-bottom:20px;}
.dropdown-menu {top:auto;}
http://jsfiddle.net/nbbjm/8/
I have a dropdown menu with two columns and I want the links inside the block that is the dropdown to change color when hovered over but when I add the style only the top level ul elements work and the entire block is active. I have been looking at this thing too long and can't figure out where I need to add the a:hover for the li.
Any idea where I need to place it so that the main links don't have a hover effect and the dropdown level do?
Full Screen
jsFiffle
This will make it work:
#top_nav li:hover > a { ... }
So, only the anchor directly within the hovered LI element "becomes active". When you hover the "projects" top-level menu item, its anchor will change color, but the anchors in the drop-down menu won't. When you then hover one of the anchors in that drop-down menu, it will change color, since its containing LI element has been hovered.
http://jsfiddle.net/kvKfr/
Shows the menu as I've got it working. Does anyone know how to keep the LI element in the parent UL from expanding? I want the sub menu to show to the right (as it is) with out causing the parent LI to change sizes. Is this possible?
The basic idea on these is to make the position absolute:
http://jsfiddle.net/kvKfr/1/
Set
ul.myMenu li > ul
to be
position:absolute
Demo at http://jsfiddle.net/gaby/kvKfr/2/
I have a drop down menu in only CSS and no JAVASCRIPT and I'm having a problem keeping the top (main menu item) highlighted when I move the cursor over the sub menu items. You can see the menu here http://www.codedecks.com/cssnav.html.
If you hover over "Kids" and move your cursor down, as soon as your over "Girls" the top "Kids" looses the highlight.
Any suggestion would be greatly appreciated! Thanks in advance
Change #nav > li a:hover to #nav > li:hover a in your CSS.
Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.
For me it worked like this, without the >:
#navigation li:hover a {
background-color:#012A5E;
color:#F1F1F1;
}
You're currently setting the hover state on the A tag, you need to (also) set it on the LI tag. When you are over a child UL, you are no longer over the A, but you are still over the LI. Try this:
#nav li hover {
background-color:#F4F4F4;
color:#543056;