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

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

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

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

代碼如下：

<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="#">手機(jī)模板下載</a></li>
    <li><a href="#">特效下載</a></li>
   </ul>
  </li>
  <li><a href="#">交流專區(qū)</a>
   <ul class="sub-menu">
    <li><a href="#">運(yùn)營交流</a></li>
    <li><a href="#">seo優(yōu)化</a></li>
    <li><a href="#">站長交流</a></li>
   </ul>
  </li>
 </ul>
</nav>
</body>
</html>

希望本文所述對大家學(xué)習(xí)jquery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評論