海海日记-冯海滨博客

您现在的位置是:首页 > C# > 正文

C#

jquery简单的下拉菜单

happyfhb2012-10-16C#1193

效果如下

 

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'}});

 

平淡中储蓄成长

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~