dropdown menu like http://www.teslamotors.com/ <p>My clients request is to make their website menu like <a href="http://www.teslamotors.com/" rel="nofollow">http://www.teslamotors.com/</a>. So far I have done is the following</p> <p>HTML</p> <pre><code>&lt;div id="header"&gt; &lt;div id="main-menu-back" class="short"&gt;&lt;!-- Begin: main-menu-back --&gt; &lt;div id="main-menu-wrapper"&gt; &lt;ul id="main-menu"&gt; &lt;li id="about"&gt;&lt;a href="about.php"&gt;About Us&lt;/a&gt;&lt;/li&gt; &lt;li id="service"&gt;&lt;a href="service.php"&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li id="contact"&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;div id="logo"&gt;&lt;!-- Begin: logo --&gt; &lt;h1&gt;&lt;a href="index.php"&gt;&lt;img src="images/interface/logo_9.jpg" width="90" height="80" alt="img" /&gt;&lt;/a&gt;&lt;/h1&gt; &lt;/div&gt; &lt;!-- End: logo --&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- End: main-menu-back --&gt; &lt;div id="menu_slider" style="top: -55px;"&gt; &lt;div id="menu_slider_wrapper"&gt; &lt;div id="menu01" class="submenu" style="left: 100px;"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;Office and Home Security Systems&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Office and Home Interiors and Electrical Wiring&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Biogas Power Plantations/ Solar Power Plantations&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Vehicle Tracking Devices/ Vehicle Security System&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Fire Alarm and Fire Hydrant Systems/Related Equipment Supply and Installations&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Ventilation Systems/Related Equipment Supply and Installations&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="menu02" class="submenu" style="left: 300px;"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="contact.php?type=location"&gt;Our Location&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="contact.php?type=contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="header_bottom"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS</p> <pre><code> #header { height: 90px; position: relative; width: 100%; z-index: 102; } #main-menu-back.short { background: url(../images/interface/header-top-back-short.JPG) repeat-x; height: 59px; } #main-menu-back { background: url(../images/interface/header-top-back.JPG) repeat-x scroll center top #DDDDDD; box-shadow: 0 1px 8px 1px #6D6B6B; font-size: 14px; font-style: normal; font-weight: 700; height: 90px; min-width: 960px; position: absolute; text-transform: uppercase; width: 100%; z-index: 3; } #main-menu-back.short #main-menu-wrapper { height: 62px; height: 62px; margin: 0 auto; position: relative; width: 960px; } #logo{ display: inline; width: 78px; position: absolute; left: 825px; z-index: 4 !important; } #logo h1 a img{ -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.75); } #header_bottom { background: url(../images/interface/header-bottom-back.png) repeat-x; width: 100%; height: 30px; text-align: left; -webkit-box-shadow: 0px 6px 3px 0px rgba(0,0,0,0.60); -moz-box-shadow: 0px 6px 3px 0px rgba(0,0,0,0.60); box-shadow: 0px 6px 3px 0px rgba(0,0,0,0.60); position: absolute; top: 59px; } ul#main-menu { margin:0; position: absolute; top: 30px; } ul#main-menu li { padding: 0 0 0 0px; list-style: none; margin: 2px 70px 0 0; display: inline; background: transparent; } ul#main-menu li a { color: #707070; font-size: 15px; font-weight: bold; text-shadow: 0 1px 0 #FFFFFF; } ul#main-menu li:hover a { color: #B80007; } #menu_slider { background: url(../images/interface/submenu-back.JPG) repeat-x; position: absolute; width: 100%; height: 111px; box-shadow: 0 1px 8px 1px #6D6B6B; overflow: hidden; z-index: 2 !IMPORTANT; } #menu_slider_wrapper { margin: 0 auto; position: relative; width: 960px; } #menu_slider div.submenu { position: absolute; top: 20px; vertical-align: top; text-align: left; } #menu_slider div.submenu ul { display: inline; float: left; min-width: 140px; padding-right: 10px; } #menu_slider div.submenu li { list-style-type: none; } #menu_slider div.submenu li a { color: #666666; font-size: 12px; font-style: normal; font-weight: 600; text-decoration: none; text-transform: uppercase; } </code></pre> <p>JS</p> <pre><code> $("ul#main-menu li").mouseenter(function () { var hoverCntrlId = $(this).attr("id"); console.log(hoverCntrlId); if (hoverCntrlId == "contact") { $("div#menu01").hide(); $("div#menu02").show(); } else if (hoverCntrlId == "service") { $("div#menu01").show(); $("div#menu02").hide(); } $('#menu_slider').animate({ top: '61px' }, 1000, function () { $('#menu_slider').slideDown(1000); }); }); $('ul#main-menu li, #menu_slider').mouseleave(function () { var hoverCntrlId = $(this).attr("id"); var msPosition = $("#menu_slider").attr("top"); if (msPosition == "61px") { $('#menu_slider').stop().animate({ top: '-55px' }); } if (hoverCntrlId == "menu_slider") { $('#menu_slider').stop(); $('#menu_slider').animate({ top: '-55px' }, 1000, function () { $('#menu_slider').slideUp(1000); }); } }); </code></pre> <p>I am able to slide up and down the div containing submenu but animation problem occurs my mouse leaves menu_slider and enters #main-menu li, then the animation occurs twice. I am not able resolve the problem. Can anyone help.</p>