问答详情
源自：2-3 鼠标浮动效果

哪位大神帮我看看，鼠标悬浮在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>


提问者：xiao55555 2015-11-28 10:59

个回答

  • 江湖書生
    2015-11-28 11:22:50
    已采纳

    http://img.mukewang.com/56591d3f0001e6fa06220391.jpg

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

    .topmenu li:hover .submenu {

    display:block;

    }

    菜鸟拙见，仅供参考

    0
  • xiao55555
    2015-11-28 12:06:17

    好了，但原因是什么呢？不加block就闪

    0
  • 江湖書生
    2015-11-28 12:04:24

    http://img.mukewang.com/565927840001b89202550280.jpg

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

    0
  • 江湖書生
    2015-11-28 11:59:12

    不敢当，客气了

    0
  • 江湖書生
    2015-11-28 11:54:50

    http://img.mukewang.com/5659255400019dae12820330.jpg

    当submenu的width:1005px的效果图

    0
  • 江湖書生
    2015-11-28 11:51:56

    http://img.mukewang.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
  • echo_kinchao
    2015-11-28 11:40:24

    你的类名冲突了

    0
  • mgsers
    2015-11-28 11:24:44

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

    0