如何创建我的存在的网站使用jQuery，HTML，CSS下拉菜单中网站的顶部

Question

我想多级别显示添加下拉菜单下面的图像

我要容易方法来创建它在我当前的引导程序网站。

帮帮我！ :)

Answer 1

非常简单的方法添加下拉菜单添加到您的网站。

检查我的文章

jQuery Drop down menu

$(function() { 
 
    $('nav li ul').hide().removeClass('fallback'); 
 
    $('nav li').hover(function() { 
 
    $('ul', this).stop().slideToggle(200); 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
a img { 
 
    border: none; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
body { 
 
    font: 400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-font-smoothing: antialiased; 
 
    -o-font-smoothing: antialiased; 
 
    font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
    color: #444; 
 
    background: #F0F0ED; 
 
} 
 

 
.wrapper { 
 
    max-width: 1000px; 
 
    width: 95%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
#header { 
 
    overflow: auto; 
 
    background: #33363C; 
 
    border-top: 5px solid #2F3135; 
 
    border-bottom: 2px solid #04A4CC; 
 
} 
 

 
#logo { 
 
    float: left; 
 
    margin: 10px 50px 5px; 
 
} 
 

 
#logo img { 
 
    width: 80px; 
 
    height: 36px; 
 
} 
 

 
#view-tut { 
 
    float: right; 
 
    font-size: 13px; 
 
    font-weight: 900; 
 
    margin: 10px 50px 5px; 
 
} 
 

 
#view-tut ul { 
 
    margin: 0; 
 
} 
 

 
#view-tut ul li { 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
    margin: 0 5px 0 0; 
 
} 
 

 
#view-tut ul li a { 
 
    display: block; 
 
    padding: 5px 10px; 
 
    background: #04A4CC; 
 
    color: #FFF; 
 
    border-radius: 20px; 
 
} 
 

 
#view-tut ul li a:hover { 
 
    background: #0097CD; 
 
} 
 

 
#main p { 
 
    padding: 0; 
 
    margin: 10px 0 0; 
 
} 
 

 
#footer { 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div id="main"> 
 
    <nav> 
 
     <ul> 
 
     <li> 
 
      <a href="#">Link 1</a> 
 
      <ul class="fallback"> 
 
      <li><a href="#">Sub-Link 1</a></li> 
 
      <li><a href="#">Sub-Link 2</a></li> 
 
      <li><a href="#">Sub-Link 3</a></li> 
 
      <li><a href="#">Sub-Link 4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 2</a> 
 
      <ul class="fallback"> 
 
      <li><a href="#">Sub-Link 1</a></li> 
 
      <li><a href="#">Sub-Link 2</a></li> 
 
      <li><a href="#">Sub-Link 3</a></li> 
 
      <li><a href="#">Sub-Link 4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 3</a> 
 
      <ul class="fallback"> 
 
      <li><a href="#">Sub-Link 1</a></li> 
 
      <li><a href="#">Sub-Link 2</a></li> 
 
      <li><a href="#">Sub-Link 3</a></li> 
 
      <li><a href="#">Sub-Link 4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 4</a> 
 
      <ul class="fallback"> 
 
      <li><a href="#">Sub-Link 1</a></li> 
 
      <li><a href="#">Sub-Link 2</a></li> 
 
      <li><a href="#">Sub-Link 3</a></li> 
 
      <li><a href="#">Sub-Link 4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 5</a> 
 
      <ul class="fallback"> 
 
      <li><a href="#">Sub-Link 1</a></li> 
 
      <li><a href="#">Sub-Link 2</a></li> 
 
      <li><a href="#">Sub-Link 3</a></li> 
 
      <li><a href="#">Sub-Link 4</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> 
 
      <a href="#">Link 6</a> 
 
      <ul class="fallback"> 
 
      <li><a href="#">Sub-Link 1</a></li> 
 
      <li><a href="#">Sub-Link 2</a></li> 
 
      <li><a href="#">Sub-Link 3</a></li> 
 
      <li><a href="#">Sub-Link 4</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </nav> 
 
    </div> 
 
</div>

就是这样..享受！