CODEWITHSUNDEEP
cssnavigationnavbarsubmenumulti-level
MilkyTech
MilkyTech

Reputation: 1927

Multilevel nav menu Hover issue

I have my nav working almost exactly how I want it. The only issue left I can't seem to figure out is this little arrow image I use on a subnav which indicates it contains another level subnav.

ul#css3menu ul span {
    background-image: url("images/arrowsub.png");
    padding-right: 28px;
}
ul#css3menu ul span:hover {
    background-image: url("images/arrowsubhover.png");
    padding-right: 28px;
}

When you hover over each subnav with an arrow, it loads a different color arrow image to maintain contrast with the background color that changes on hover.
Problem is when you hover over the next level subnav, the arrow switches back while the background color remains changed (as it should).

Why does the background color of the parent li not lose its hover rules but the arrow does?

you can see the behavior and code with this js fiddle

Upvotes: 0

Views: 531

Answers (2)

ramesh
ramesh

Reputation: 2487

In your case it is better to assign the hover state on the main container of the list item rather than just target the specific element within your menu list item. In your case change your line 196 on js fiddle to .submenu li:hover span . Even if you move a level deep to access the child menu item, you are by default still hovering over the parent element.

Plus it is good practice not to use IDs when styling. IDs are usually reserved for Javascript.

Upvotes: 1

Bill Mei
Bill Mei

Reputation: 787

It looks like the rule that affects the background color on hover is ul#css3menu ul li:hover>a

Since ul#css3menu ul li:hover detects hovering over any li element that is a child of ul#css3menu ul, and the 2nd-level submenu also consists of lis, the hover state for the 1st-level li is maintained when you hover over the 2nd-level li because the original rule is still in effect (since it is active when you hover over any child li, including the 2nd-level lis).

When ul#css3menu ul li:hover is true the CSS style is subsequently applied to the direct child a (rather than applied to the lis) to give you the full rule of ul#css3menu ul li:hover>a. This confused me too for a while because the detection happens separately from the application of the styles. Hope this helps.

Upvotes: 1

Related Questions