jquery简单的下拉菜单

摘要：效果如下 Html代码：  <ul id="nav"> <li><a href="#">Item One</a> <ul> <li><a href="#…

效果如下

Html代码：

<ul id="nav">  <li><a href="#">Item One</a>    <ul>      <li><a href="#">Sub-menu Item 1</a></li>      <li><a href="#">Sub-menu Item 2</a></li>      <li><a href="#">Sub-menu Item 3</a></li>    </ul>  </li>  <li><a href="#">Item Two</a>    <ul>      <li><a href="#">Sub-menu Item 1</a></li>      <li><a href="#">Sub-menu Item 2</a></li>      <li><a href="#">Sub-menu Item 3</a></li>    </ul>  </li>  <li><a href="#">Item Three</a>    <ul>      <li><a href="#">Sub-menu Item 1</a></li>      <li><a href="#">Sub-menu Item 2</a></li>      <li><a href="#">Sub-menu Item 3</a></li>    </ul>  </li></ul>

Css代码：

#nav { float: right; height: 30px; }#nav li { float: left; position: relative; }#nav li a { display: block; padding: 5px 10px; line-height: 20px; }#nav li ul { display: none; position: absolute; top: 30px; left: 0; width: 120px; background: #fff; }#nav li:hover ul { display: block; }#nav li ul li { float: none; }#nav li ul li a { display: inline-block; }#nav li ul li a { display: block; }

javascript代码：

$('#sidebarNav').nmcDropDown({  trigger: 'click',  submenu_selector: 'p',  show: {height: 'show'},  hide: {height: 'hide'}});