I've just designed a new personal Drupal CMS theme for my personal portfolio website. (This is not a permanent theme, and I am not looking for critique on the design.) The PHP templates, HTML, and CSS are extremely close to done, however I'm a bit of a newbie with Javascript and Jquery, and can't seem to get the drop down menu for the Portfolio link to work correctly. It rolls down, but if you start to scroll down through the drop down, it closes back up. If you move off the link, it stays dropped down... (you'll see what I mean)... http://www.lizzydavis.com External JS file <!-- // array of images var imgs = new Array(3); imgs[0] = "/sites/all/themes/custom/space/images/tab_home_on.jpg"; imgs[1] = "/sites/all/themes/custom/space/images/tab_resume_on.jpg"; imgs[2] = "/sites/all/themes/custom/space/images/tab_portfolio_on.jpg"; imgs[3] = "/sites/all/themes/custom/space/images/tab_contact_on.jpg"; imgs[4] = "/sites/all/themes/custom/space/images/tab_identity_on.jpg"; imgs[5] = "/sites/all/themes/custom/space/images/tab_print_on.jpg"; imgs[6] = "/sites/all/themes/custom/space/images/tab_web_on.jpg"; imgs[7] = "/sites/all/themes/custom/space/images/tab_ecommerce_on.jpg"; imgs[8] = "/sites/all/themes/custom/space/images/tab_photography_on.jpg"; imgs[9] = "/sites/all/themes/custom/space/images/tab_home_off.jpg"; imgs[10] = "/sites/all/themes/custom/space/images/tab_resume_off.jpg"; imgs[11] = "/sites/all/themes/custom/space/images/tab_portfolio_off.jpg"; imgs[12] = "/sites/all/themes/custom/space/images/tab_contact_off.jpg"; imgs[13] = "/sites/all/themes/custom/space/images/tab_identity_off.jpg"; imgs[14] = "/sites/all/themes/custom/space/images/tab_print_off.jpg"; imgs[15] = "/sites/all/themes/custom/space/images/tab_web_off.jpg"; imgs[16] = "/sites/all/themes/custom/space/images/tab_ecommerce_off.jpg"; imgs[17] = "/sites/all/themes/custom/space/images/tab_photography_off.jpg"; // preload the images function preload() { var tmp = null; for (var j = 0; j < imgs.length; j++) { tmp = imgs[j]; imgs[j] = new Image(); imgs[j].src = tmp; } } void(preload()); // swap images function imgSwap(img, swap) { img.src = imgs[swap].src; } //--> $(document).ready(function() { var pageUrl = window.location.href; urlSplit = pageUrl.split("/"); path = urlSplit[urlSplit.length-1]; if (path == "") { var img = document.getElementById('home_rollover'); img.src = "/sites/all/themes/custom/space/images/tab_home_on.jpg"; img.onmouseout = "null"; } if (path == "resume") { var img = document.getElementById('resume_rollover'); img.src = "/sites/all/themes/custom/space/images/tab_resume_on.jpg"; img.onmouseout = "null"; } if (path == "portfolio" || path == "identity" || path == "print" || path == "web" || path == "ecommerce" || path == "photography") { var img = document.getElementById('portfolio_rollover'); img.src = "/sites/all/themes/custom/space/images/tab_portfolio_on.jpg"; img.onmouseout = "null"; } if (path == "?q=contact") { var img = document.getElementById('contact_rollover'); img.src = "/sites/all/themes/custom/space/images/tab_contact_on.jpg"; img.onmouseout = "null"; } }); Code (markup): JS and HTML in question <div id="navigation_center"> <div id="navigation_container"> <div id="navigation_tabs"> <a href="/"><img src="/sites/all/themes/custom/space/images/tab_home_off.jpg" onMouseOver="imgSwap(this,0);" onMouseOut="imgSwap(this,9);" id="home_rollover" /></a> <a href="/resume"><img src="/sites/all/themes/custom/space/images/tab_resume_off.jpg" onMouseOver="imgSwap(this,1);" onMouseOut="imgSwap(this,10);" id="resume_rollover" /></a> <script type="text/javascript"> $(document).ready(function () { $('#portfolio_rollover').mouseover(function () { $('#dropdown_container').slideDown('medium'); }); $('#dropdown_container').mouseout(function () { $('#dropdown_container').slideUp('medium'); }); }); </script> <div id="portfolio_dropdown"> <a href="/portfolio"><img src="/sites/all/themes/custom/space/images/tab_portfolio_off.jpg" onMouseOver="imgSwap(this,2);" onMouseOut="imgSwap(this,11);" id="portfolio_rollover" /></a> <div id="dropdown_container" style="display: none;"> <a href="/portfolio"><img src="/sites/all/themes/custom/space/images/tab_identity_off.jpg" onMouseOver="imgSwap(this,4);" onMouseOut="imgSwap(this,13);" /></a> <a href="/portfolio"><img src="/sites/all/themes/custom/space/images/tab_print_off.jpg" onMouseOver="imgSwap(this,5);" onMouseOut="imgSwap(this,14);" /></a> <a href="/portfolio"><img src="/sites/all/themes/custom/space/images/tab_web_off.jpg" onMouseOver="imgSwap(this,6);" onMouseOut="imgSwap(this,15);" /></a> <a href="/portfolio"><img src="/sites/all/themes/custom/space/images/tab_ecommerce_off.jpg" onMouseOver="imgSwap(this,7);" onMouseOut="imgSwap(this,16);" /></a> <a href="/portfolio"><img src="/sites/all/themes/custom/space/images/tab_photography_off.jpg" onMouseOver="imgSwap(this,8);" onMouseOut="imgSwap(this,17);" /></a> </div> </div> <a href="/?q=contact"><img src="/sites/all/themes/custom/space/images/tab_contact_off.jpg" onMouseOver="imgSwap(this,3);" onMouseOut="imgSwap(this,12);" id="contact_rollover" /></a> </div> </div> </div> </div> Code (markup): If anyone has any suggestions or ideas, I would be extremely appreciative. Thanks!