为了账号安全,请及时绑定邮箱和手机立即绑定

哪位大神帮我看看,鼠标悬浮在li上时,怎么隐藏的块不显示,而且鼠标悬浮在li上时,会出现闪动的情况,怎么解决

<!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 回答

http://img1.sycdn.imooc.com//56591d3f0001e6fa06220391.jpg

由于你所命名的“submenu”是一个类名,所以你的css选择器应该在submenu前加“.”

.topmenu li:hover .submenu {

display:block;

}

菜鸟拙见,仅供参考

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

非常感谢!
2015-11-28 回复 有任何疑惑可以回复我~
#2

xiao55555 提问者

但那个class为right部分为什么会在下面呢,没有和class为left对齐
2015-11-28 回复 有任何疑惑可以回复我~

好了,但原因是什么呢?不加block就闪

0 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//565927840001b89202550280.jpg

在你的代码对应位置加上我给你圈出的代码,你试试

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

好了,但原因是什么呢?不加block就闪
2015-11-28 回复 有任何疑惑可以回复我~

不敢当,客气了

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

那你看到当鼠标滑到li时,为什么闪一下再出现字?如何解决让它不闪
2015-11-28 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//5659255400019dae12820330.jpg

当submenu的width:1005px的效果图

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

谢谢大神,我看到了
2015-11-28 回复 有任何疑惑可以回复我~

http://img1.sycdn.imooc.com//565922cf0001dd4003140657.jpg

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值改大试一下。

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

好了,还有一个问题就是当鼠标滑到li时,为什么那个字会闪一下再出现字?
2015-11-28 回复 有任何疑惑可以回复我~

你的类名冲突了

0 回复 有任何疑惑可以回复我~
#1

xiao55555 提问者

不明白?哪些类名冲突了
2015-11-28 回复 有任何疑惑可以回复我~

应该是li 和a 的 hover事件冲突了,去改改看

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

哪位大神帮我看看,鼠标悬浮在li上时,怎么隐藏的块不显示,而且鼠标悬浮在li上时,会出现闪动的情况,怎么解决

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号