View Full Version : gap apearing on hover

07-25-2009, 09:41 AM
Hi, i have a menu which on one option produces a drop down menu.

function drop(){
jQuery("#menu li ul li").css("height", "0px");
jQuery("#menu li ul li").css("display", "none");
jQuery("#menu li ul li").animate({
height: '17px',
margin: '0',
padding: '0'
}, 600);
jQuery("#menu li ul li").animate({
height: '0'
}, 600, null, function(){
jQuery("#menu li ul li").css("display", "none");

<ul id="menu">
<li><a href="../index.html" class="dark bounce" title="Home" tabindex="1" accesskey="h">Home</a></li>
<li><a href="../about_us" class="light bounce" title="about Us" tabindex="2" accesskey="a">About us</a></li>
<li><a href="../lawn_cutting" class="dark drop" title="lawn cutting" tabindex="3" accesskey="m">Services <img src="../images/for_web/downArrow.png" width="15" height="15" alt="" /></a></li>
<li><a href="../lawn_cutting" title="lawn cutting" tabindex="3" accesskey="m">Lawn Cutting</a></li>
<li><a href="../lawn_treatment" title="lawn Treatment &amp; Repair" tabindex="4" accesskey="l">Lawn Treatment &amp; Restoration</a></li>
<li><a href="../hedges_and_trees" title="hedges and trees" tabindex="5" accesskey="j">Hedges &amp; Trees</a></li>
<li><a href="../hedges_and_trees" title="hedges and trees" tabindex="5" accesskey="j">Grounds Maintenance</a></li>
<li><a href="../recent_work_and_testimonials" class="light bounce" title="recent Work And Testimonials" tabindex="6" accesskey="r">Recent Work &amp; Testimonials</a></li>
<li><a href="../contact" class="dark bounce" title="contact" tabindex="7" accesskey="c">Contact</a></li>
is the code.

i have it closing when you hover over any other of the menu options but if you hover over them before its open then it produces a round about 10px gap and then closes.

Anyone see why that is happening?

07-25-2009, 08:41 PM