关于2级菜单栏中a和li样式的混淆

html部分

<nav>
  <ul>
    <li><a href="#">首页</a>
         <ul class="second_menu">
           <li>导航1</li>
           <li>导航2</li>
           <li>导航3</li>
           <li>导航4</li>
         </ul>
    </li>
    <li><a href="#">产品</a>
         <ul class="second_menu">
           <li>导航1</li>
           <li>导航2</li>
           <li>导航3</li>
           <li>导航4</li>
         </ul>
    </li>
    <li><a href="#">关于我们</a>
         <ul class="second_menu">
           <li>导航1</li>
           <li>导航2</li>
           <li>导航3</li>
           <li>导航4</li>
         </ul>
    </li>
    <li><a href="#">联系我们</a>
        <ul class="second_menu">
           <li>导航1</li>
           <li>导航2</li>
           <li>导航3</li>
           <li>导航4</li>
         </ul>
    </li>
  </ul>
</nav>

1. 二级菜单的放置位置
   不要把二级菜单放到a标签里面，如果二级菜单里面也有a标签的话，会导致元素错位。

   
   二级菜单放置位置

---

css部分

1. 给a标签设置样式的时候千万不要忘记a标签是一个行内元素。
   a标签是一个行内元素，所有设置的上下padding颜色会有效果，但是不会扩大空间，给人产生错觉。
   a标签的行内元素
2. 关于绝对定位没有设置偏移量时候的位置解析。
   没有设置偏移量
   不设置偏移量的时候元素相对于自身的位置不动。但是IE不支持。但是设置了偏移量后就相对与body(除了position:static的其他属性的父元素定位)
   设置了偏移量
   position:relative要放到对于的li上，进行定位，不然会都重合在一起。
   相对定位放到li标签上
3. 二级菜单知道大致字数可以通过width: 6em(例子)来控制
   可以通过padding-right: ...和width来扩大二级菜单的大小，但是width会固定宽度，不管字数大小，都会一样大，好看一点。padding-right:就会灵活一点，但是对于字数不一样的二级菜单会出现宽度的不同。
4. 添加hover的时候要给一级菜单的li标签添加而不是给a标签添加
   给li标签添加伪类
   因为a标签和.second_menu是兄弟标签，不能用父子标签显示，这个是一个容易忽视的点
   兄弟标签
   一般都是可以给li标签添加hove来控制元素的效果

---

6. **记住虽然给二级菜单添加了position:absolute，但是它还是包含在li标签中，所有我们可以给li标签添加伪类，让鼠标移动到二级菜单的时候，给a标签做一定的效果。
   **

   
   给li标签添加伪类离开后影响a标签

---

查看demo
兄弟标签不推荐

---

扩展

多级菜单

链接地址