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>

Answer 1

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!