哪位大神帮我看看，鼠标悬浮在li上时，怎么隐藏的块不显示，而且鼠标悬浮在li上时，会出现闪动的情况，怎么解决
xiao55555
2015-11-28 10:59
<!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>无标题文档</title>
<style>
body {
padding:0px;
font-size:10pt;
}
.topmenu {
display:block;
width:220px;
border:1px solid #b1191a;
margin:0;
padding:0;
}
.toptitle {
height:40px;
line-height:40px;
text-align:left;
font-size:11pt;
font-weight:bold;
color:#FFF;
background-color:#b1191a;
padding-left:20px;
}
.topmenu li {
height:30px;
line-height:30px;
font-size:11pt;
list-style:none;
text-align:left;
padding-left:20px;
background-color:#c81623;
z-index:1;
}
.topmenu li a {
text-decoration:none;
color:#FFF;
}
.topmenu li a:hover{
color:#F00;
font-weight:bold;
}
.topmenu li:hover{
border:1px solid #ddd;
border-right:0;
//box-shadow:0 0 8px #ddd;
//-moz-box-shadow:0 0 8px #ddd;
//-webkit-box-shadow:0 0 8px #ddd;
background-color:#FFF;
}
.submenu {
display:none;
width:1000px;
position:absolute;
top:40px;
left:220px;
border:1px solid #ddd;
z-index:2;
background-color:#036;
box-shadow:0 0 8px #ddd;
-moz-box-shadow:0 0 8px #ddd;
-webkit-box-shadow:0 0 8px #ddd;
}
.left {
float:left;
width:810px;
margin:5px;
background-color:#96C;
}
.right {
float:right;
width:175px;
margin:5px;
background-color:#33C;
}
.topmenu li:hover submenu {
display:block;
}
</style>
</head>
<body>
<ul class="topmenu">
<div class="toptitle">
全部商品分类
</div>
<li><a href="#">图书、音像、数字商品</a>
<div class="submenu">
<div class="left">
左侧悬浮栏<br />
左侧悬浮栏<br/>
左侧悬浮栏<br/>
左侧悬浮栏<br/>
</div>
<div class="right">
右侧悬浮栏
</div>
</div>
</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>
<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>
</body>
</html>
8回答
-
- 江湖書生
- 2015-11-28 11:22:50
由于你所命名的“submenu”是一个类名，所以你的css选择器应该在submenu前加“.”
.topmenu li:hover .submenu {
display:block;
}
菜鸟拙见，仅供参考
-
- xiao55555
- 2015-11-28 12:06:17
好了，但原因是什么呢？不加block就闪
-
- 江湖書生
- 2015-11-28 12:04:24
在你的代码对应位置加上我给你圈出的代码，你试试
-
- 江湖書生
- 2015-11-28 11:59:12
不敢当，客气了
-
- 江湖書生
- 2015-11-28 11:54:50
当submenu的width:1005px的效果图
-
- 江湖書生
- 2015-11-28 11:51:56
left：width:810+margin:10px(5px*2){左右两个外边距}=820px
right:width:175px+margin:10px(5px*2){左右两个外边距}=185px
.submenu:width:1000px < 820px+185px（1005px）
左右两个块元素（left+right）的宽度之和比他们的父级块元素(submenu)的宽度多出5px，所以第二个元素（right）就被挤到下边了，你把.submenu的width值改大试一下。
-
- echo_kinchao
- 2015-11-28 11:40:24
你的类名冲突了
-
- mgsers
- 2015-11-28 11:24:44
应该是li 和a 的 hover事件冲突了，去改改看
商城分类导航效果
63734 学习 · 315 问题
相似问题