Drop Down Menu

by TheFiddler

HTML

<div id="menucontainer">
  <ul id="jsddm">              
    <li class="topmenu"><a class="aa" href="#">Main Menu</a>
      <ul style="visibility: hidden;">
          <li><a href="http://www.google.com">Google</a></li>
          <li><a href="http://www.apple.com">Apple</a></li>
          <li><a href="http://www.microsoft.com">Microsoft</a></li>
      </ul>
    </li>        
    <li class="topmenu"><a class="aa" href="#">Second Menu</a>
       <ul style="visibility: hidden;">
           <li><a href="http://www.Oracle.com">Oracle</a></li>
           <li><a href="http://www.sp.com">HP</a></li>
           <li><a href="http://www.dell.com">Dell</a></li>
       </ul>
     </li>        
       
  </ul>
</div>

CSS

#jsddm
{    margin: 0;
    padding: 0;

}
#jsddm li {    float: left;
            list-style: none;
            font-size: 18px;
    }

#jsddm li a {    display: block;
    padding: 5px 10px;
    text-decoration: none;
    border-right: 1px solid white;
    color: #666;
    white-space: nowrap;
}
#jsddm li.active a {color: black;}
.separador a {border-top: 1px solid #eaeaea;}
#jsddm li a:hover {    color: black}
#jsddm li ul {    margin: 0;
        padding: 0;
        position: absolute;
        visibility: hidden;
        z-index: 99999;
        min-width: 150px;
        border: 1px solid silver}
        
#jsddm li ul li {float: none;
    font-size: 14px;
    
    display: inline}
            
#jsddm li ul li a {    width: auto;
    background: white;
    color: #24313C}
#jsddm li ul li a:hover {background: #eaeaea}

JavaScript

var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open(myobj) {
    // Changed this to not rely on this.
    var submenu = myobj.find('ul');
    jsddm_canceltimer();
    jsddm_close();
    if (submenu) {
        ddmenuitem = submenu.css('visibility', 'visible');
        return false;
    }
    return true;
}

function jsddm_close() { 
    if (ddmenuitem) ddmenuitem.css('visibility', 'hidden'); 
}

function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout); }

function jsddm_canceltimer() {
    if (closetimer) {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

$(document).ready(function () {
    $('#jsddm > li').bind('mouseover', function() { jsddm_open($(this));});
    $('#jsddm > li').bind('mouseout', jsddm_timer);

    // this work, but the submenus dont click
    $('.aa').bind('click', function(e)
                  {
                      jsddm_open($(this).parent());
                      e.stopPropagation();
                  });
});

document.onclick = jsddm_close;