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来控制元素的效果
-
**记住虽然给二级菜单添加了position:absolute，但是它还是包含在li标签中，所有我们可以给li标签添加伪类，让鼠标移动到二级菜单的时候，给a标签做一定的效果。
**
给li标签添加伪类离开后影响a标签
扩展
多级菜单
