87,921
社区成员
发帖
与我相关
我的任务
分享jQuery制作左侧下拉菜单的问题！
<script type="text/javascript">
$(function(){
$(".box ul li").hover(function(){
$(this).find(".menu_1").stop(true,true).show("fast")
},function(){
$(this).find(".menu_1").stop(true,true).hide("fast")
})
})
</script>
<style type="text/css">
body{padding:0; margin:0; margin:0 auto; width:800px; margin-top:30px; font:14px/1.6em Verdana, Arial, Helvetica, sans-serif;}
p{padding:0; margin:0; color:#949494}
ul,li{padding:0; margin:0;}
a{color:#949494; text-decoration:none;}
a:hover{ color:#fff; text-decoration:none;}
ul li{list-style:none;}
.box{width:215px; border:solid 1px #949494; padding:3px;}
.box ul li{position: relative;}
.box ul li a{display:block; background:#f6f6f6; color:#949494;height:30px; line-height:30px; border-bottom:1px #dcdcdc solid; width:200px; padding-left:15px;}
.box ul li a:hover{display:block; background:#ee224d; color:#fff;height:30px; line-height:30px; border-bottom:1px #dcdcdc solid;}
.menu_1{position:absolute;left: 217px;top:0px;width: 100px; border:solid 3px #ee224d; display:none; z-index:100;}
</style>
<body>
<div class="box">
<ul>
<li><a href="#">演唱会</a>
<ul class="menu_1">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
</li>
<li><a href="#">音乐剧</a></li>
<li><a href="#">话剧歌剧</a></li>
<li><a href="#">舞蹈芭蕾</a></li>
<li><a href="#">体育比赛</a></li>
<li><a href="#">英超足球</a></li>
<li><a href="#">周边商品</a></li>
<li><a href="#">亲子儿童</a></li>
</ul>
</div>
</body>
</html>
效果是出来了，但是当鼠标划过，LI会出现一个白色的块，要怎么解决呢，？
$(function(){
$(".box ul li").hover(function(){
$(this).find(".menu_1").stop(true,true).show("fast")
},function(){
$(this).find(".menu_1").stop(true,true).hide("fast")
})
})
</script>
<style type="text/css">
body{padding:0; margin:0; margin:0 auto; width:800px; margin-top:30px; font:14px/1.6em Verdana, Arial, Helvetica, sans-serif;}
p{padding:0; margin:0; color:#949494}
ul,li{padding:0; margin:0;}
a{color:#949494; text-decoration:none;}
a:hover{ color:#fff; text-decoration:none;}
ul li{list-style:none;}
.box{width:215px; border:solid 1px #949494; padding:3px;}
.box ul li{position: relative;}
.box ul li a{display:block; background:#f6f6f6; color:#949494;height:30px; line-height:30px; border-bottom:1px #dcdcdc solid; width:200px; padding-left:15px;}
.box ul li a:hover{display:block; background:#ee224d; color:#fff;height:30px; line-height:30px; border-bottom:1px #dcdcdc solid;}
.menu_1{position:absolute;left: 217px;top:0px;width: 100px; border:solid 3px #ee224d; display:none; z-index:100;}
</style>
<body>
<div class="box">
<ul>
<li><a href="#">演唱会</a>
<ul class="menu_1">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
<li>菜单四</li>
</ul>
</li>
<li><a href="#">音乐剧</a></li>
<li><a href="#">话剧歌剧</a></li>
<li><a href="#">舞蹈芭蕾</a></li>
<li><a href="#">体育比赛</a></li>
<li><a href="#">英超足球</a></li>
<li><a href="#">周边商品</a></li>
<li><a href="#">亲子儿童</a></li>
</ul>
</div>
</body>
</html>
效果是出来了，但是当鼠标划过，LI会出现一个白色的块，要怎么解决呢，？
...全文
请发表友善的回复…
发表回复
womenquxuexi 2011-12-02
- 打赏
- 举报
是不是没有引用jquery-1.6.2.js，我的运行没问题的 。
乘桴游海 2011-12-02
- 打赏
- 举报
li的display设成:block
他的父ul的text-align设成center
他的父ul的text-align设成center
