Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts

    gap apearing on hover

    Hi, i have a menu which on one option produces a drop down menu.

    Code:
    jQuery(document).ready(drop);
    	function drop(){
    		jQuery("#menu li ul li").css("height", "0px");
    		jQuery("#menu li ul li").css("display", "none");
    		jQuery(".drop").hover(function(){
    			jQuery("#menu li ul li").animate({
    				height: '17px',
    				margin: '0',
    				padding: '0'
    			}, 600);
    		});
    		jQuery(".light").hover(function(){
    			jQuery("#menu li ul li").animate({
    				height: '0'
    			}, 600, null, function(){
    				jQuery("#menu li ul li").css("display", "none");	
    			});
    		});
    	}
    Code:
    <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>
    					<ul>
    						<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>
    					</ul>
    				</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>
    			</ul>
    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?

  • #2
    Regular Coder
    Join Date
    Sep 2008
    Posts
    280
    Thanks
    25
    Thanked 9 Times in 9 Posts
    anybody?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •