纯CSS实现下拉菜单导航

时间 2019-11-08

原文原文链接

前言：本题是网易云课堂的前端微专业《页面制做》课程的做业题，当时对题意理解错误没有实现题目要求，成了心中永远的痛，所谓念念不忘必有回响，在学校图书馆花了几个小时作出来并对相关知识点进行了总结，写了这篇博文。好，进入正题。css

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

2.HTML结构前端

<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>

3.设置样式spa

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

li,
li a {
    text-decoration: none;
    list-style-type: none;
    font-family: "宋体";
    font-size: 12px;
    color: #000;
}

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

.btn1 {
        display: block;
        border: 1px solid #ddd;
        width: 50px;
        height: 28px;
        text-align: center;
        line-height: 28px;
    }

（3）将下拉菜单隐藏设置成不可见blog

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）不能忘了最后一个utf-8

.last {
    border-bottom: 1px solid #ddd;
}

（6）设置鼠标hover时出现下拉菜单it

.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>