jquery导航插件制作二级下拉菜单列表1_ul二级导航栏jquery怎么做-CSDN博客

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery导航插件制作二级下拉菜单列表|jsfoot 网页特效</title>
<meta name="keywords" content="jquery导航插件制作二级下拉菜单列表" />
<meta name="description" content="jquery特效,js特效,flash特效,div+css教程,html5教程" />

</head>

<body>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
(function(a){
a.fn.hoverClass=function(b){
  var a=this;
  a.each(function(c){
   a.eq(c).hover(function(){
    $(this).addClass(b)
   },function(){
    $(this).removeClass(b)
   })
  });
  return a
};
})(jQuery);

$(function(){
$("#navbox").hoverClass("current");
});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
body{font:12px/180% "宋体";}
/* menu */
.menu{height:26px;width:110px;margin:20px auto;background:#fff;position:relative;}
.menu a{display:block;height:24px;line-height:24px;padding:0 0 0 10px;border:solid 1px #ddd;}
.menu a.tit{background:url(images/arrow.gif) no-repeat;background-position:94px 9px;}
#navbox.current a.tit{background-position:94px -15px;color:#3366cc;font-weight:800;border-bottom:solid 1px #fff;position:relative;z-index:9;}
.menu .subnav{display:none;background:#fff;position:absolute;top:25px;left:0px;width:140px;border-style:solid;border-color:#ddd;border-width:1px;}
#navbox.current .subnav{display:block;}
.menu .subnav a{border:none;}
.menu .subnav a:hover{background:#eee;border-left:solid 1px #fff;border-right:solid 1px #fff;font-weight:800;}
</style>

<div id="navbox" class="menu">
<a class="tit" href="#">jquery特效</a>
<ul class="subnav">
  <li><a href="#">jquery图片特效</a></li>
  <li><a href="#">jquery导航菜单</a></li>
  <li><a href="#">jquery选项卡特效</a></li>
  <li><a href="#">jquery文字特效</a></li>
  <li><a href="#">jquery表单特效</a></li>
  <li><a href="#">jquery表格特效</a></li>
</ul>
</div>