jquery下拉菜单

html：

<ul id="jsddm">
        <li><a href="#">首页</a>
         
        </li>
        <li><a href="#">关于我们</a>
          <ul style="visibility: hidden;">
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
            <li><a href="#">Semitransparent</a></li>
          </ul>
        </li>
        <li><a href="#">新闻动态</a>
          <ul style="visibility: hidden;">
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
          </ul>
        </li>
        <li><a href="#">产品展示</a>
          <ul>
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
          </ul>
        </li>
        <li><a href="#">联系我们</a>
          <ul style="visibility: hidden;">
            <li><a href="#">Slide Effect</a></li>
            <li><a href="#">Fade Effect</a></li>
            <li><a href="#">Opacity Mode</a></li>
            <li><a href="#">Drop Shadow</a></li>
          </ul>
        </li>
      </ul>

js脚本

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var timeout         = 500;
var closetimer  = 0;
var ddmenuitem      = 0;

function jsddm_open()
{ jsddm_canceltimer();
 jsddm_close();
 ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

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', jsddm_open);
 $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
  </script>

 

css样式：

#jsddm {
 margin: 0;
 padding: 0;
}
#jsddm li {
 float: left;
 list-style: none;
 font: 12px Tahoma, Arial
}
#jsddm li a {
 display: block;
 background: #324143;
 padding: 5px 12px;
 text-decoration: none;
 border-right: 1px solid white;
 width: 70px;
 color: #EAFFED;
 white-space: nowrap
}
#jsddm li a:hover {
 background: #24313C
}
#jsddm li ul {
 margin: 0;
 padding: 0;
 position: absolute;
 visibility: hidden;
 border-top: 1px solid white
}
#jsddm li ul li {
 float: none;
 display: inline
}
#jsddm li ul li a {
 width: auto;
 background: #A9C251;
 color: #24313C
}
#jsddm li ul li a:hover {
 background: #8EA344
}