购物网站的简单菜单栏

来源：互联网发布：账户到期数据库编辑：程序博客网时间：2024/04/29 20:09

效果如图所示，即鼠标悬浮在左边红色部分，右边绿色部分出现，鼠标移出绿色部分，绿色消失。

代码：

<html><head><title></title><style>*{margin:0;padding:0;}ul{list-style:none;position:relative;}.first{margin:20px;}.second{position:absolute;display:none;left:100px;top:0;}.first > li{width:100px;height:20px;background-color:red;margin-bottom:10px;}.second li{width:600px;height:500px;background-color:green;}</style><script src="jquery-1.11.1.min.js"/></script>    <script type="text/javascript">$(document).ready(function(){$(".first > li").hover(function(){var index=$(".first >  li").index(this);$(".second").css("display","none");$(".second").eq(index).css("display","inline");},function(){$(".second").css("display","none");});});</script></head><body><ul class="first"><li>1<ul class="second"><li>11</li></ul></li><li>2<ul class="second"><li>21</li></ul></li><li>3<ul class="second"><li>31</li></ul></li><li>4<ul class="second"><li>41</li></ul></li><ul></body></html>

0 0