jquery+css实现的红色线条横向二级菜单效果

2020-05-16 18:45:33易采站长站整理

<DIV class=kind_menu id="Layer2">
<A href="#">脚本下载</A>
<A href="#">脚本教程</A> </DIV></LI>
<LI><SPAN class=v><A href="#">导航条</A></SPAN>
<DIV class=kind_menu id="Layer3">
<A href="#">英文域名</A>
<A href="#">中文域名</A>
<A href="#">通用网址</A>
<A href="#">源码下载</A>
<A href="#">域名交易</A>
<A href="#">域名帮助</A>
<A href="#">智能加速</A> </DIV></LI>
<LI><SPAN class=v><A href="#">电子商务</A></SPAN>
<DIV class=kind_menu id="Layer4">
<A href="#">网络营销</A>
<A href="#">源码下载</A>
<A href="#">网络营销</A>
<A href="#">网页特效</A> </DIV></LI>
<LI><SPAN class=v><A href="#">网络营销</A></SPAN>
<DIV class=kind_menu id="Layer5">
<A href="#">网络营销</A>
<A href="#">网络营销</A>
<A href="#">网络营销</A>
<A href="#">网页特效代码</A> </DIV></LI>
<LI><SPAN class=v><A href="#">关于我们</A></SPAN>
<DIV class=kind_menu id="Layer6">
<A href="#">网络营销</A>
<A href="#">源码下载</A>
<A href="#">网络营销</A>
<A href="#">网页特效</A> </DIV></LI>
</UL>
<DIV class=r></DIV>
</DIV><!--nav-->
<SCRIPT type="text/javascript">
var site_url = window.location.href.toLowerCase();
switch (true) {
default :
$("#nav li").attr("class","");
$("#nav li").eq(0).attr("class","nav_lishw");
$(".nav_lishw .v a").attr("class","sele");
$(".nav_lishw .kind_menu").show();
}
$("#nav li").hover(
function(){
clearTimeout(setTimeout("0")-1);
$("#nav .kind_menu").hide();
$("#nav li .v .sele").attr("class","shutAhover");
$(this).attr("id","nav_hover")
$("#nav_hover .v a").attr("class","sele");
$("#nav_hover .kind_menu").show();
},
function(){
if($(this).attr("class") != "nav_lishw"){
$("#nav_hover .v .sele").attr("class","");
$("#nav_hover .kind_menu").hide();
}
$(this).attr("id","")
$("#nav li .v .shutAhover").attr("class","sele");
setTimeout(function(){
$(".nav_lishw .kind_menu").show();
$(".nav_lishw .v a").attr("class","sele");
},50);
}
);
</SCRIPT>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。