Html二级菜单宽度不能自适应

Body:

<body>
<div id="menu">
   <ul>
   
  <li><a href="#">首页</a>
      <ul>
          <li><a href="#">视频学习</a></li>
          <li><a href="#">案例学习</a></li>
          <li><a href="#">交流平台</a></li>
      </ul>
   </li>
  <li><a href="#">课程大厅</a>
      <ul>
          <li><a href="#">JavaScripJavaScripJavaScript</a></li>
         <li><a href="#">jQuery</a></li>
      </ul>
  </li>
  <li><a href="#">学习中心</a>
      <ul>
     <li><a href="#">视频学习</a></li>
     <li><a href="#">案例学习</a></li>
     <li><a href="#">交流平台</a></li>
    </ul>
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
  </ul>
</div>
</body>

CSS:

 ul{ list-style:none;}
 ul li{ float:left;  line-height:40px; text-align:center; position:relative;}
 a{ text-decoration:none; color:#000; display:block; padding:0 10px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none; border-left:none; margin-top:2px; background-color:#eee; }
 ul li ul{   display:none; position:absolute;}
 ul li:hover ul{ display:block;}

效果看图。。。

5490d1350001992803990215.jpg

5490d135000144bd04320284.jpg


Anvin
浏览 3566回答 2
2回答

赵小布

  <li><a href="#">首页</a>       <ul style="width:100px;">           <li><a href="#">视频学习</a></li>           <li><a href="#">案例学习</a></li>           <li><a href="#">交流平台</a></li>       </ul>    </li>   <li><a href="#">课程大厅</a>       <ul style="width:300px;">           <li><a href="#">JavaScripJavaScripJavaScript</a></li>          <li><a href="#">jQuery</a></li>       </ul>   </li>   <li><a href="#">学习中心</a>       <ul style="width:100px">      <li><a href="#">视频学习</a></li>      <li><a href="#">案例学习</a></li>      <li><a href="#">交流平台</a></li>     </ul>   </li>   <li><a href="#">经典案例</a></li>   <li><a href="#">关于我们</a></li>   </ul>在每一个二级菜单的ul上设定固定的宽度,覆盖掉继承自一级菜单li的宽度,这样就好啦。

donaf

第一个<li>设置了display:block;第二个<li>应该就是集成父级的高度。
打开App,查看更多内容
随时随地看视频慕课网APP