h5学习笔记 下拉菜单

                       

鼠标经过菜单的时候，下拉菜单形成起来。这个案例中，有一些比较有趣的事情。

首先要了解这种菜单设计结构。我们知道ul+li经常组合列表，这种列表既有纵向，也有横向。列表中的li元素，再包一个ul+li的组合元素。这样一个列表下拉菜单结构就变得很清晰了。

 <ul>      <li>菜单一</li>      <li>菜单二         <div class="sub_item">              <ul>                 <li>案例一</li>                 <li>案例二</li>              </ul>          </div>      </li>      <li>菜单三</li>   <ul>
  
  
  

   
1
   
2
   
3
   
4
   
5
   
6
   
7
   
8
   
9
   
10
   
11
   
12
  

我们将一个菜单横向化，有float：left的做法，配置边框间隔可以做出这种相间的效果。其次使用display: inline-block;内联块也可以快速横向布局起来。但使用内联块有一些奇怪的事情发生。当浮动菜单的时候就出现一些诡异的事情。

改用float ：left则没事情。
默认情况下，二级菜单列表是隐藏的，显示方式为：display:none