css sub menu hover issue

Question

I have a submenu and when I hover over the parent list it drops down like it is supposed to and everything is working with the hover color, but when i go back up to the parent list it doesnt show the hover color until I am at the very top/practically off the list..is this a padding issue?

/* MENU */


 #gen_navigation {

float:right;
margin:0;
padding:0;


 }

#gen_navigation li a, #gen_navigation li {
float:left;
}

 #gen_navigation li {

list-style:none;
position:relative;

}

 #gen_navigation li a {
padding: 35px 20px 23px 20px;
text-decoration:none;
color:white;
border-right: 1px solid #3c3c3c;
border-left: 1px solid #333;
border-bottom: 1px solid #232323;
border-radius:3px;
}

 /* Sub-Menu */
 #gen_navigation li ul {
display:none;
position:absolute;
left:0;
top:100%;
margin:0;
padding:0;
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
  background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%,   #3c3c3c), to(#292929)); 

}

  #gen_navigation li:hover ul {
display:block;

}
#gen_navigation li ul li, #gen_navigation li ul li a {
float:none;
}


#gen_navigation li ul li a {
 width: 180px;
 display: block;
}

and the html

 <ul id="gen_navigation">
            <li class="selected"><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a>
                <ul>
                    <li><a href="#">Gate 5 Energy Partners</a></li>
                    <li><a href="#">Leadership</a></li>
                    <li><a href="#">Key Consultants & Strategic Partners</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Technology</span></a>
                <ul>
                    <li><a href="#">About SERT</a></li>
                    <li><a href="#">About the inventor</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Applications</span></a>
                <ul>
                    <li><a href="#">Agri-Business</a></li>
                    <li><a href="#">WasteWater Industry</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Benefits</span></a>
                <ul> 
                    <li><a href="#">Environmental Benefits</a></li>
                    <li><a href="#">Economic Benefits</a></li>
                </ul>
            </li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>

Here is this jsfiddle.net/YjLxy

Blake
– Blake

2012-12-14 22:48:41 +00:00
Commented Dec 14, 2012 at 22:48 — Blake
– Blake, Commented Dec 14, 2012 at 22:48

Fábio Duque Silva · Accepted Answer · 2012-12-14 23:29:57Z

2

Well I was trying to get your code working, and I got it, but now I see that joholo sorted it out. Nevertheless, I think I have your fix: by using jQuery's parents(), I re-add the 'selected' class to your top <li>.

Check this working example

By the way: I think your .animate does not work, so I guess you were trying to use jQuery-UI's effect. Check it out too.

Regards!

edited Dec 14, 2012 at 23:29

answered Dec 14, 2012 at 23:21

Fábio Duque Silva

2,1461 gold badge18 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Blake Over a year ago

yeah that was giving me problems..what would I add to that so that when I hover off the first submenu item the hover goes away

Fábio Duque Silva Over a year ago

Sorry, I didn't understand you...Could you rephrase it?

Blake Over a year ago

sorry..when you hover over the sub menu and then you go back up to the parent list, is there a way that when you are hovering over the parent list item that the top child of that UL would remove the hover class..I hope that wasnt even more confusing, still learning the lingo

Fábio Duque Silva Over a year ago

Oh, I get it now. Yes, you just have to use mouseleave. Check jsfiddle.net/fabio_silva/YjLxy/14

Blake Over a year ago

ah i was so close! perfect thats just what I needed, you the man

|

joholo · Accepted Answer · 2012-12-14 23:12:04Z

1

Probably not a padding issue, looks to me more like a javascript eventhandler issue.

The parent still has hover in javascript even though you're hovering over one of it's children. Hence, the hover won't fire for the parent when you go back to the parent.

$('li').hover(function(){
    // 1. Parent gets onmouseover (hover) first time. Adds .selected on it's element.
    // 2. When mouse move from parent to child, removes .selected from parent, and adds to child.
    // 3. When back from child to parent, onmouseover (hover) on parent won't fire because it already (technically one of its children) already has onmouseover.
    $('li').removeClass('selected'); 
    $(this).addClass('selected').animate(bounce);        
});

How to fix it in a nice way is a different question :-)

answered Dec 14, 2012 at 23:12

joholo

6335 silver badges11 bronze badges

1 Comment

Blake Over a year ago

ah yes!!!!!!!!!!!!!!!thank you I can finally leave the dreaded library..much appreciated

Collectives™ on Stack Overflow

css sub menu hover issue

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related