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

作者: sunny519111 | 来源:发表于2016-12-29 01:46 被阅读61次

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>

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

二级菜单放置位置

css部分

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