创建菜单栏

Question

我想创建一个下拉菜单栏，鼠标悬停在使用jQuery，CSS，HTML的动作.. 请任何人都可以帮助我的新想法。

Answer 1

我相信这将帮助你一吨： http://css-tricks.com/simple-jquery-dropdowns/

Answer 2

搜索插件这里 - http://plugins.jquery.com/

Answer 3

如果你想从从头开发它，那么你可以在这个demo看一看，这将帮助您了解下拉菜单的工作原理。如果你不想重新发明轮子，那么你可以选择其他人已经提到的插件。

HTML

<ul id="menu"> 
    <li class="menuitem"> 
     <a href="#">Menu Item 1</a> 
     <div class="submenu"> 
      <div>1</div> 
      <div>2</div> 
     </div> 
    </li> 
    <li class="menuitem"> 
     <a href="#">Menu Item 2</a> 
     <div class="submenu"> 
      <div>3</div> 
      <div>4</div> 
     </div> 
    </li> 
    <li class="menuitem"> 
     <a href="#">Menu Item 3</a> 
     <div class="submenu"> 
      <div>5</div> 
      <div>6</div> 
     </div> 
    </li> 
</ul> 

CSS

#menu li.menuitem 
{ 
    width: 100px; 
    height: 30px; 
    float: left; 
    margin: 0 10px; 
} 
.submenu 
{ 
    display: none; 
    border-bottom: 1px solid #a9a9a9; 
     border-left: 1px solid #a9a9a9; 
     border-right: 1px solid #a9a9a9; 
} 
.submenuactive 
{ 
    display: block; 
     border-bottom: 1px solid #a9a9a9; 
     border-left: 1px solid #a9a9a9; 
     border-right: 1px solid #a9a9a9; 
} 

jQuery的

$(function(){ 
    $("#menu li.menuitem").hover(function(){ 
     $(this).find("div.submenu").removeClass("submenu").addClass("submenuactive"); 
    }, 
    function(){ 
     $(this).find("div.submenuactive").removeClass("submenuactive").addClass("submenu"); 
    }); 
});