CSS二级菜单

0.需求：当鼠标hover到按钮上时，出现下拉菜单导航条。

1.问题拆解：

（1）HTML应该如何组织比较方便合理

因为题中要求下拉菜单位于按钮的正下方，可以使用列表<li>中嵌套无序列表<ul>的方式，设置<ul>padding值为0。
（2）如何实现下拉菜单在鼠标没有hover到按钮上时不出现
使用定位隐藏，设置下拉菜单为绝对定位，设置一个负的很大的值。

（3）如何实现下拉菜单在鼠标hover时出现
设置鼠标hover时，<ul>列表的left值。

<body>

    <li class="btn"><a class="btn1" href="#">按钮</a>

        <ul>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a class="last" href="#">下拉菜单项</a></li>

        </ul>

    </li>

</body>

（1）首先重置默认的<li>,<a>标签样式

        li,

        li a {

            text-decoration: none;

            list-style-type: none;

            font-family: "宋体";

            font-size: 12px;

            color: #000;

        }

（2）设置按钮的边框等，此时我设置的是外层<li>标签中<a>标签的样式，此时将内层<a>标签设置成块级block，这样可以设置宽高，并且后面有用（后面再说）。

       .btn1 {

            display: block;

            border: 1px solid #ddd;

            width: 50px;

            height: 28px;

            text-align: center;

            line-height: 28px;

        }

(3)将下拉菜单隐藏设置成不可见

        ul {

            margin-top: 1px;

            position: absolute; /*设置绝对定位*/

            left: -999em;   /*设置隐藏*/

            padding: 0;  /*离它的父元素的边界为0，所以可以位于父元素<li>的正下方*/

        }

(4)为下拉菜单项添加样式

        ul li a {

            display: inline-block;  /*菜单项宽度未知，设置inline－block宽度为内容宽度*/

            border-top: 1px solid #ddd;

            border-left: 1px solid #ddd;  /*这方法很笨，千万别学我*/

            border-right: 1px solid #ddd;

            height: 30px;

            padding: 0 10px;

            line-height: 30px;

        }

(5)不能忘了最后一个

        .last {

            border-bottom: 1px solid #ddd;

        }

(6)设置鼠标hover时出现下拉菜单

        .btn:hover ul {

            left: auto; /*默认ul的padding为0，位于按钮正下方*/

        }

(7)设置hover时改变背景颜色

        ul li a:hover {

            background-color: #ddd;

        }

(8)此时会有一个小bug，鼠标hover到按钮整一行时都会出现下拉菜单，因为此时最外层的<li>标签是块级元素，块级元素没有设置宽度默认的宽度是父元素宽度，而它的父元素是body，第（6）步写的是hover整个外层<li>标签，所以会出现这种情况。
解决办法：可以在父元素<li>设置inline－block，子元素设置block，当子元素内容超出时，父元素宽度根据内容变化，所以，可以将按钮hover区域控制按钮边框之内。

        .btn{

            display: inline-block; /*设置btn是inline－block，

            默认宽度为内容宽度，则鼠标只会在hover到按钮区域时才会展开下拉菜单*/

        }

以下是完整代码：

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>纯css实现下拉菜单</title>

    <style>

        li,

        li a {

            text-decoration: none;

            list-style-type: none;

            font-family: "宋体";

            font-size: 12px;

            color: #000;

        }

        

        .btn1 {

            display: block;

            border: 1px solid #ddd;

            width: 50px;

            height: 28px;

            text-align: center;

            line-height: 28px;

        }

        

        ul {

            margin-top: 1px;

            position: absolute; /*设置绝对定位，宽度为内容宽度*/

            left: -999em;   /*设置隐藏*/

            padding: 0;  /*离它的父元素的边界为0，所以可以位于父元素li的正下方*/

        }

        

        ul li a {

            display: inline-block;  /*菜单项宽度未知，设置inline－block宽度为内容宽度*/

            border-top: 1px solid #ddd;

            border-left: 1px solid #ddd;

            border-right: 1px solid #ddd;

            height: 30px;

            padding: 0 10px;

            line-height: 30px;

        }

        

        .last {

            border-bottom: 1px solid #ddd;

        }

        

        .btn:hover ul {

            left: auto; /*默认ul的padding为0，位于按钮正下方*/

        }

        

        ul li a:hover {

            background-color: #ddd;

        }

        .btn{

            display: inline-block; /*设置btn是inline－block，

            默认宽度为内容宽度，则鼠标只会在hover到按钮区域时才会展开下拉菜单*/

        }

    </style>

</head>

 

<body>

    <li class="btn"><a class="btn1" href="#">按钮</a>

        <ul>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a class="last" href="#">下拉菜单项</a></li>

        </ul>

    </li>

</body>

</html>