【css】css制作下拉菜单

css基础样式：

            ul {
                overflow: hidden;/*解决ul无高度*/
                background-color: #333;
            }
            /*使用左浮动制作水平菜单*/
            li {
                float: left;
            }

            li a,
            .dropbtn {
                display: inline-block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            li a:hover,
            .dropdown:hover .dropbtn {
                background-color: #111;
            }

            .dropdown {
                display: inline-block;
            }

            .dropdown-content {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            }

            .dropdown-content a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

            .dropdown-content a:hover {
                background-color: #f1f1f1
            }
            /*下拉菜单 hover时候改变display*/
            .dropdown:hover .dropdown-content {
                display: block;
            }

html代码：

        <ul>
            <li>
                <a class="active" href="#home">主页</a>
            </li>
            <li>
                <a href="#news">新闻</a>
            </li>
            <div class="dropdown">
                <a href="#" class="dropbtn">下拉菜单</a>
                <div class="dropdown-content">
                    <a href="#">链接 1</a>
                    <a href="#">链接 2</a>
                    <a href="#">链接 3</a>
                </div>
            </div>
        </ul>

        <h3>导航栏上的下拉菜单</h3>
        <p>鼠标移动到 "下拉菜单" 链接先显示下拉菜单。</p>

小结：
1.css选择器组合不要超过三层。
2.注意hover的写法。

   .dropdown:hover .dropdown-content {
                display: block;
            }

3.div是层级嵌套，组合选择器时注意权重，小心样式覆盖问题。
4.a标签是内联元素。注意常用的内联元素和块级元素。
5.display是个重要的属性，需要多用多体会。

转载链接：http://www.runoob.com/css/css-dropdowns.html