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>