用css制作简单的导航栏效果——悬停改变

1、架构很简单就是 ul 里面有 li ；而每个 li 里面包含着 a 标签存放文字，一个 span；

2、首先是 ul 的控制，

position，方便控制位置，和下面子元素的位置；

border-bottom，控制下面的红色分界线；

padding-left，padding-right控制左右的内边距；

3、li的控制，

float，控制悬浮变为一排；

4、a标签；

text-decoration，控制a标签的默认下划线消失；

float，方便控制位置；

padding，控制a标签的间距；

5、span的控制（就是 每个选项之间的间隔线）

borde-left，控制左侧的边框；

height，控制高度；

margin-top，控制位置；

float，保持和其他元素的位置；

6、a：hover属性，就是悬停在 a标签上时触发的（具体的可以百度），

color，控制触发时的颜色；

background，添加图片，取消平铺，图片居中，控制位置；