#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    120
    Rep Power
    2

    Drop down appearing when hovering over where it should open


    Hey, so I'm trying to make 2 drop downs and they work fine except the problem is when I hover with the cursor over the space where the drop downs should appear, they appear but they should only be visible if hovering over the menu button the drop down is for.

    Here is my code:

    js:
    Code:
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    function nav(){
    $('#menu ul li').hover(function() {
    	 $(this).find('ul:first').stop().animate({height: '182px', opacity: '100'},{queue:false, duration:200, easing: 'easeInSine'}).show()
    	 	}, function() {
    	 $(this).find('ul:first').stop().animate({height: '0px', opacity: '0'},{queue:false, duration:100, easing: 'easeInCirc'}).show() 
          });
      };
      $(document).ready(function() {
        nav();
    });
    </script>
    styling:
    Code:
    #trailersmenu {
    	float: left;
    	width: 107px;
    	height: 55px;
    }
    #partsmenu {
    	float: left;
    	width: 180px;
    	height: 55px;
    }
    #contactmenu {
    	float: left;
    	width: 89px;
    	height: 55px;
    }
    /* main menu styles */
    #menu {
    	margin: 0;
    	padding: 0;
    	clear: both;
    	float: left;
    	width: 376px;
    	height: 55px;
    	margin-left: 229px;
    	position: relative;
    }
    #menu li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #menu ul {
    	margin: 0;
    	padding: 0;
    }
    #menu ul li {
    	float: left;
    	margin: 0;
    	padding: 0;
    }
    #subnav-trailers {
    	margin: 0;
    	padding: 0;
    }
    #subnav-trailers ul li {
    	float: left;
    }
    #subnav-trailers li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #menu ul li ul {
    	width: 107px;
    	height: 182px;
    	overflow: hidden;
    	display: none;
    	clear: both;
    }
    #trailer-submenu-cont {
    	width: 124px;
    	height: 182px;
    	background-image: url(images_folder/header/newheader/menus/png/new-menutrailer.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	top: 47px;
    	left: -6px;
    	position: absolute;
    }
    #trailer-submenu-links {
    	line-height: 1.4em;
    	width: 200px;
    	height: auto;
    	float: left;
    	margin-top: 40px;
    	margin-left: 20px;
    }
    #trailer-submenu-links a:hover {
    	background-color: #F90;
    	outline: 4px solid #F90;
    	color: #fff;
    }
    #subnav-parts {
    	margin: 0;
    	padding: 0;
    }
    #subnav-parts ul li {
    	float: left;
    }
    #subnav-parts li {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    }
    #parts-submenu-cont {
    	width: 290px;
    	height: 188px;
    	padding-left: 20px;
    	padding-right: 20px;
    	padding-top: 40px;
    	padding-bottom: 40px;
    	background-image: url(images_folder/header/newheader/menus/png/new-menuparts.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	top: 47px;
    	left: 100px;
    	position: absolute;
    }
    #parts-submenu-links {
    	text-align: left;
    	line-height: 1.4em;
    	width: 145px;
    	height: auto;
    	float: left;
    }
    #parts-submenu-links2 {
    	text-align: left;
    	line-height: 1.4em;
    	width: 145px;
    	height: auto;
    	float: left;
    }
    #parts-submenu-links a:hover {
    	background-color: #F90;
    	outline: 4px solid #F90;
    	color: #fff;
    }
    #parts-submenu-links2 a:hover {
    	background-color: #F90;
    	outline: 4px solid #F90;
    	color: #fff;
    }
    html:
    Code:
    <div id="menu">
            	<ul id="mainmenu">
            		<li id="trailerlist">
                    	<div id="trailersmenu">
            				<a class="trailerslink" href="trailers.php" target="_self"><img class="trailerbtnimg" src="images_folder/header/newheader/buttons/png/new-trailers.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-trailershover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-trailers.png'" width="107" height="55" border="0" alt="Trailers" /></a>
                		</div>
                        <ul id="subnav-trailers">
                        	<li>
                            	<div id="trailer-submenu-cont">
                                	<div id="trailer-submenu-links">
    									<a href="#" class="menufont3">Tent Trailers</a><br />
                                        <a href="#" class="menufont3">Travel Trailers</a><br />
                                        <a href="#" class="menufont3">Fifth Wheels</a><br />
                                        <a href="#" class="menufont3">Park Models</a><br />
                                        <a href="#" class="menufont3">Cargo Trailers</a><br />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                	<li>
                    	<div id="partsmenu">
                			<a href="partsandaccessories.php" target="_self"><img src="images_folder/header/newheader/buttons/png/new-parts.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-partshover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-parts.png'" width="180" height="55" border="0" alt="Parts and Accessories" /></a>
            			</div>
                        <ul id="subnav-parts">
                        	<li>
                            	<div id="parts-submenu-cont">
                                	<div id="parts-submenu-links">
    									<a href="#" class="menufont3">Bathroom</a><br />
                                        <a href="#" class="menufont3">Bedroom</a><br />
                                        <a href="#" class="menufont3">Cleaning Products</a><br />
                                        <a href="#" class="menufont3">Decoratives</a><br />
                                        <a href="#" class="menufont3">Exterior Accessories</a><br />
                                        <a href="#" class="menufont3">Exterior Parts</a><br />
                                        <a href="#" class="menufont3">Interior Accessories</a><br />
                                        <a href="#" class="menufont3">Interior Parts</a><br />
                                        <a href="#" class="menufont3">Kitchen</a><br />
                                    </div>
                                    <div id="parts-submenu-links2">
                                        <a href="#" class="menufont3">Lighting</a><br />
                                        <a href="#" class="menufont3">Living Room</a><br />
                                        <a href="#" class="menufont3">Other Accessories</a><br />
                                        <a href="#" class="menufont3">Other Parts</a><br />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                		<div id="contactmenu">
                			<a href="contact.php" target="_self"><img src="images_folder/header/newheader/buttons/png/new-contact.png" onmouseover="this.src='images_folder/header/newheader/buttons/png/new-contacthover.png'" onmouseout="this.src='images_folder/header/newheader/buttons/png/new-contact.png'" width="89" height="55" border="0" alt="Contact" /></a>
            			</div>
                    </li>
                </ul>
            </div>
    Last edited by andy1212; September 12th, 2013 at 11:45 AM.

IMN logo majestic logo threadwatch logo seochat tools logo