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

二级div内容隐藏后出不来了,请大神指教

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title></title>
  <style type="text/css">
   body
   {
       padding:0;
       font-size:10pt; 
   }
   .topmenu
   {
    display:block;
    width:200px;
    border:2px solid #e4393c;
    margin:0;
    padding:0;
   }
   .toptitle
   {
    height:40px;
    line-height:40px;
    text-align:left;
    font-size:11pt;
    font-weight:bold;
    color:white;
    background:#e4393c;
    padding-left:20px;
   }
   .topmenu li
   {
    height:30px;
    line-height:30px;
    font-s:11pt;
    list-style-type:none;
    text-align:left;
    padding-left:8px;
    z-index:3;
    background-image: url(http://img.mukewang.com/5411027300014f0200220030.jpg);
    background-repeat: no-repeat;
    background-position:right;
   }
   .topmenu li a
   {
    text-decoration: none;
    color:#313131;
    
   }
   .topmenu li a:hover
   {
    text-decoration:underline;
    font-weight:bold;
    color:#e4393c;
   }
   .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-image:none;
   }
        .submenu
   {
    display:none;
    width:715px;
    left:220px;
    position:absolute;
    top:40px;
    border:1px solid #DDD;
    z-index:4;
    background:white;
    -moz-box-shadow:0 0 8px #DDD;
    -webkit-box-shadow: 0 0 8px #DDD;
    background-image:none;
   }
   .leftdiv
   {
    background:gray;
    float:left;
    width:490px;
    margin:5px;
    
   }
   .rightdiv
   {
    background:blue;
    float:left;
    width:200x;
    margin:5px;
    
   }
  .topmenu li:hover  .submenu
   {
   
    display: block;
   }
  </style>
 </head>
 <body>
  <ul class="topmenu">
   <div class="toptitle">全部商品分类</div>
   <li><a href="#">图书、音响、数字产品</a></li>
       <div class="submenu"> 
          <div class="leftdiv">
        左侧二级分类<br>
        左侧二级分类<br>
        左侧二级分类<br>
        左侧二级分类<br>   
           </div>
            
        <div class="rightdiv">
                         右侧二级分类<br>
         右侧二级分类<br>
           </div>
       </div>
   <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>


提问者:tzdyl 2016-03-10 11:15

个回答

  • 北极熊的梦想
    2016-03-10 22:04:22
    已采纳

    95行:.topmenu li:hover .submenu

    106行: <div class="submenu"> 并不在 li 内