0

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

Chris L
  • 1,814
  • 2
  • 13
  • 34

2 Answers2

1

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.

Bill Mei
  • 601
  • 10
  • 22
  • I follow you. that completely explains why the button remains in its hover state even when hovering the second level. Oh snap! and now I see why this explanation also explains why changing line 196 to `ul#css3menu ul li:hover span` fixes my issue. I was only styling `span`s in a hover state and so I wasn't hovering a `span` in the 2nd level `li` so I was losing my arrow. now that I am styling the `span` of a hovered `li`, since I am still hovering a `li` I don't lose the arrow. is that correct? I hope so. I think I'm starting to get a handle on this css stuff! woohoo! – Chris L Apr 07 '14 at 00:00
1

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.

ramesh
  • 1,514
  • 3
  • 15
  • 26
  • I couldn't get anything to work with `.submenu` but the `li:hover span` portion of your selector gave me an idea and I got it to work by changing line 196 to `ul#css3menu ul li:hover span` – Chris L Apr 06 '14 at 23:29
  • oh man, and this also fixed the issue i was having in [this question](http://stackoverflow.com/questions/22898462/conditionally-style-an-element-based-on-whether-it-contains-a-particular-child-e) which I worked around with padding and margin. now I can eliminate that code. sweet! – Chris L Apr 07 '14 at 00:11
  • hard to say who should get credit for the accepted answer. the submenu suggestion didn't seem to work (could be my fault not implementing it properly) but you were correct about styling the hovered `li` instead of the `span` – Chris L Apr 07 '14 at 00:16
  • 1
    The reason why it didn't work is because you have used an ID in line 192 to style you span and ID will always override a class. If you change line 192 to .submenu ul span, then it would work. I would recommend you reading this article http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html – ramesh Apr 07 '14 at 00:41
  • i don't follow. The way I read line 192 (`ul#css3menu ul span`) is that I am styling all of the 'span's within a nested `ul` of all `ul`s with the id `#css3menu`. that id is the is id of the entire nav system which is much larger than the single tab in the [jsfiddle](http://jsfiddle.net/eb96A/). I tried substituting `.submenu` on line 192 and the result didn't work. – Chris L Apr 07 '14 at 02:02
  • 1
    I think I might be confusing you even further. I made the changes that I was talking about on codepen http://codepen.io/nighrage/pen/kJnCH/. Check line 192 for the changes I was talking about. – ramesh Apr 07 '14 at 08:37
  • aha, yes. I see it now. Thank you. I will try to style more classes and be much more conscious of inheritance. – Chris L Apr 07 '14 at 19:44