jquery下拉菜单

Posted 2020-10-07

这个是jq代码，jq1版本是支持兼容ie的，jq2及以上版本完全不考虑ie了

<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#nav li").hover(function(){
$(this).find("ul").slideDown("slow");
},function(){
$(this).find("ul").slideUp("fast");
});
});
</script>

这部分是css样式，可以直接用的

@charset "utf-8";
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/normal Verdana, Arial, Helvetica, sans-serif;}

/*nav*/
#nav .mainlevel{background:#ffe60c;float:left;border-right:1px solid #fff;width:140px;/*IE6 only*/}
#nav .mainlevel a{color:#000;text-decoration:none;line-height:32px;display:block;padding:0 20px;width:100px;}
#nav .mainlevel a:hover,#nav .mainlevel a.cur{color:#fff;text-decoration:none;background:#062723 url(../images/slide-panel_03.png) 0 0 repeat-x;}
#nav .mainlevel ul{display:none;position:absolute;}
#nav .mainlevel li{border-top:1px solid #fff;background:#ffe60c;width:140px;/*IE6 only*/}

这部分是html结构

<ul id="nav">
　　<li class="mainlevel">
　　　　<a href="http://sc.chinaz.com/jiaoben/">一级导航</a>
　　　　<ul>
　　　　　　<li><a href="http://sc.chinaz.com/jiaoben/">二级导航1</a></li>
　　　　　　<li><a href="http://sc.chinaz.com/jiaoben/">二级导航2</a></li>
　　　　　　<li><a href="http://sc.chinaz.com/jiaoben/">二级导航3</a></li>
　　　　</ul>
　　</li>

　　<li class="mainlevel">
　　　　<a href="http://sc.chinaz.com/jiaoben/">一级导航</a>
　　　　<ul>
　　　　　　<li><a href="http://sc.chinaz.com/jiaoben/">二级导航1</a></li>
　　　　　　<li><a href="http://sc.chinaz.com/jiaoben/">二级导航2</a></li>
　　　　　　<li><a href="http://sc.chinaz.com/jiaoben/">二级导航3</a></li>
　　　　</ul>
　　</li>
</ul>

这个是最基本、简单的下拉菜单，是我再网上找的一个，把其中重要的部分总结提炼了出来，后面的话自己会去写，有比较好同时又简洁的效果也会陆续分享出来的！