前端学习 CSS—导航栏 下拉栏

导航栏
1.在使用<li></li>属性时，注意用list-style-type: none;消除列表样式；
2.横向导航栏时，将overflow: hidden;置于<ul></ul>的CSS中，同时可用float或display:inline;横置列表；
3.链接<a></a>中，可以使用display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我 们指定宽度；
4.a {text-decoration: none}消去链接下划线；
5. 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

下拉栏
1.display: none;隐藏下拉列表，当鼠标覆盖时（:hover 选择器）display: block;显示；
（注意：display: none;不占用空间，visibility:hidden;占用空间）
隐藏元素的另一方法（手风琴动画效果）：style="max-height: 0;overflow: hidden;"
2.分清position:relative与position:absolute的使用时间；
3.注意pading margin min-width等的使用。
4.li与ul嵌套使用

<li>home
<ul>
<li>a</li>
<li>a</li>
</ul>

5.在下拉菜单样式设计中注意伪类的使用：
⑴>：在嵌套标签中，将样式只作用于儿子辈的标签，而不作用于孙子辈的标签。
⑵伪类元素:after的使用：①:afer②::after
⑶定位符position的使用

 [实例一](https://blog.csdn.net/chris_z_0622/article/details/69062855)
 [实例二](https://www.cnblogs.com/zhouandke/p/6683899.html)