jquery+div+css二级菜单

来源:互联网 发布:淘宝账号注册 编辑:程序博客网 时间:2024/04/30 22:07
<style>    #table5 { margin-top:16px;border:solid 1px #e71212; height:148px;}    #table5 td{  }/*border:solid 1px #e71212; */  #nav, #nav ul { padding: 0;margin: 0;list-style: none;}#nav li { float: left;position: relative;}#nav a:link, #nav a:visited {display: block;}#nav ul { display: none;position: absolute;margin-top:30px;background-color:#e7be00;}#nav ul li {float: none;}#nav li:hover ul {display: block;}.nav .li  {  position:relative;width:100px;  float:left; }  .nav2{  position: absolute;        display: none;  left:0;  top:0px;   background-color:#e7be00;     }.nav2 li a:hover{  background:none;}</style><div class="menu"><ul id="nav" class="nav"><li style=" padding-left:20px;"><a href="index.aspx" style="color:White"  >首   页</a></li><li><a href="imglist.aspx?id=123" style="color:White" >图图图图</a></li><li><a href="list.aspx?id=217" style="color:White">222222</a></li><li><a href="list.aspx?id=301" style="color:White">33333</a></li><li class="li"><a href="fenlei.aspx?id=2"  style="color:White" >4444</a>       <ul class="nav2">        <li><a target=_blank href="fenlei.aspx?id=2" style=" color:White; ">7777</a></li>        <li><a target=_blank href="fenlei.aspx?id=4" style=" color:White;">8888</a></li>        <li><a target=_blank href="fenlei.aspx?id=3" style=" color:White;">99999</a></li>        <li><a target=_blank href="fenlei.aspx?id=1" style=" color:White;">155665</a></li>        </ul></li><li><a href="list.aspx?id=296"   style="color:White">7878787</a></li><li class="menumain"><a href="liuyan.aspx"   style="color:White">5875587587</a></li></ul></div><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>          <script type="text/javascript" language="javascript">            $(document).ready(function () {                $(".li").each(function () {                    $(this).mouseover(function () {                        $(this).children(".nav2").css("display", "block");                    })                    $(this).mouseleave(function () {                        $(this).children(".nav2").css("display", "none");                    })                });            });      </script>