欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jQuery實現(xiàn)二級下拉菜單效果

 更新時間：2016年02月01日 10:41:07   作者：gogoggo  
這篇文章主要介紹了jQuery實現(xiàn)二級下拉菜單效果的相關資料,二級下拉菜單在實際應用中非常的常見，比如企業(yè)網站的產品分類，或者部門分類等等，需要的朋友可以參考下

本文通過代碼實例詳細介紹一下簡單的二級下拉菜單是如何實現(xiàn)的，當然還有更為復雜的二級菜單，不過先學會如何制作簡單的，分享給大家供大家參考，具體內容如下

代碼如下：

<html>
<head>
<meta charset=" utf-8">
<title>下拉菜單</title>
<style type="text/css">
nav a{ 
 text-decoration:none; 
} 
nav>ul>li{ 
 float:left; 
 text-align:center; 
 padding:0 0.5em;
 width:120px; 
}
nav li ul.sub-menu{ 
 display:none; 
 padding-left:0 !important; 
} 
.sub-menu li{color:white;} 
.sub-menu li:hover{background-color:black;} 
.sub-menu li:hover a{color:white;} 
ul{list-style: none;} 
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
 $('.box> li').hover(function(){ 
  $(this).find('.sub-menu').css('display', 'block'); 
 },function(){ 
  $(this).find('.sub-menu').css('display', 'none'); 
 }); 
}); 
</script> 
</head>
<body>
<nav>
 <ul class="box">
  <li><a href="#">前端專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">jquery教程</a></li>
    <li><a href="#">css教程</a></li>
    <li><a href="#">js教程</a></li>
   </ul>
  </li>
  <li><a href="#">資源專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">電腦模板下載</a></li>
    <li><a href="#">手機模板下載</a></li>
    <li><a href="#">特效下載</a></li>
   </ul>
  </li>
  <li><a href="#">交流專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">運營交流</a></li>
    <li><a href="#">seo優(yōu)化</a></li>
    <li><a href="#">站長交流</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

希望本文所述對大家學習jquery程序設計有所幫助。

相關文章

最新評論