Geek Answers Handbook

Whether the parent in the drop-down menu does not change color with hovering

I have a <li> that on hover shows <ul> below it. I finally aligned the borders, but now for some reason, the color li:hover will not change when I digress from it. It appears that when <ul> active, the parent <li> remains hovering in accordance with CSS.

Here jsFiddle shows what happens:

http://jsfiddle.net/Luryf/

When <ul> displayed and the parent <li> not hanging, I would like the parent <li> have the same background color and border color of the <li> elements in <ul> . What is the best way to fix this while maintaining the integrity of the borders of the entire <div> ?

+4
source share
3 answers

You can change

 #nav li#parent:hover {

to

 #nav li#parent a:hover {

Also you could put:

 #nav li#parent:hover { background-color:#CCD9FF; border-color: #99B3FF; }

To make it look consistent. http://jsfiddle.net/Luryf/4/

update:. It seems also necessary to move border-* and border-radius-* to your own. (from parent to parent a ) http://jsfiddle.net/Luryf/8/

from

 #nav li#parent{ background-color:#FFF; border-top-right-radius:5px 5px; border-top-left-radius:5px 5px; -moz-border-top-left-radius:5px 5px; -moz-border-top-right-radius:5px 5px; -webkit-border-top-left-radius:5px 5px; -webkit-border-top-right-radius:5px 5px; border-top:1px solid #FFF; border-right: 1px solid #FFF; border-left:1px solid #FFF; } #nav li#parent:hover{ background-color:#CCD9FF; border-color: #99B3FF; }

in

 #nav li#parent { background-color:#FFF; } #nav li#parent a { border-top-right-radius:5px 5px; border-top-left-radius:5px 5px; -moz-border-top-left-radius:5px 5px; -moz-border-top-right-radius:5px 5px; -webkit-border-top-left-radius:5px 5px; -webkit-border-top-right-radius:5px 5px; border-top:1px solid #FFF; border-right: 1px solid #FFF; border-left:1px solid #FFF; } #nav li#parent:hover a { background-color:#CCD9FF; border-color: #99B3FF; }
+3
source

If you don't mind using any jQuery, you can do it

 $('ul#children').hover( function(){ $(this).parent('li').css('background-color','#CCD9FF'); }, function(){ $(this).parent('li').css('background-color',''); } );

Example: http://jsfiddle.net/Luryf/1/

+2
source

Like this: jsfiddle

I made sure that #parent li does not wrap around ul, doesn’t change any css, most importantly this one:

 #nav li:hover + ul, #nav ul ul:hover { display:block; z-index:100; }

Update

and added the following:

 #nav li, #nav ul:hover #parent { background-color:#CCD9FF; } #nav ul:hover #parent { border-left: 1px solid #99B3FF; border-right: 1px solid #99B3FF; border-top: 1px solid #99B3FF; }

Front

 #nav li#parent:hover { ... }
0
source

More articles:


All Articles