纯CSS实现酷黑风格三级下拉菜单效果代码-前端开发

下面是详细讲解“纯CSS实现酷黑风格三级下拉菜单效果代码”的完整攻略。

下面是详细讲解“纯CSS实现酷黑风格三级下拉菜单效果代码”的完整攻略。

版本要求

CSS3
HTML5

效果演示

点击此处查看效果演示

示例HTML代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>纯CSS实现酷黑风格三级下拉菜单效果代码</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <ul>
            <li><a href="#">一级菜单1</a></li>
            <li>
                <a href="#">一级菜单2</a>
                <ul>
                    <li><a href="#">二级菜单1</a></li>
                    <li><a href="#">二级菜单2</a></li>
                    <li>
                        <a href="#">二级菜单3</a>
                        <ul>
                            <li><a href="#">三级菜单1</a></li>
                            <li><a href="#">三级菜单2</a></li>
                            <li><a href="#">三级菜单3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单3</a>
                <ul>
                    <li><a href="#">二级菜单4</a></li>
                    <li><a href="#">二级菜单5</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>

示例CSS代码

/* 去除默认样式 */
ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 一级菜单样式 */
ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #222;
}

li {
    position: relative;
    margin: 0 10px;
}

li a {
    display: block;
    height: 100%;
    line-height: 50px;
    padding: 0 20px;
    color: #fff;
    text-decoration: none;
}

li:hover > a {
    background-color: #555;
}

/* 二级菜单样式 */
ul ul {
    position: absolute;
    top: 50px;
    left: 0;
    display: none;
    background-color: #555;
}

li:hover > ul {
    display: block;
}

li ul li {
    position: relative;
    margin: 0;
    height: 40px;
    line-height: 40px;
}

li ul li a {
    padding: 0 15px;
}

/* 三级菜单样式 */
ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    background-color: #999;
}

li ul li:hover > ul {
    display: block;
}

li ul li ul li {
    position: relative;
    margin: 0;
    height: 30px;
    line-height: 30px;
}

li ul li ul li a {
    padding: 0 10px;
}

实现过程

去除默认样式
首先需要去除默认样式，这里我们去除了ul和li的margin、padding以及list-style。
一级菜单样式
一级菜单使用了flex布局，并设置了背景色、高度以及内边距等样式。
二级菜单样式
二级菜单使用了position: absolute绝对定位，并设置了top: 50px和left: 0来确定位置。并通过display: none隐藏了二级菜单的初始状态，当鼠标悬停在一级菜单上时，使用li:hover > ul选择器来显示对应的二级菜单。
三级菜单样式
三级菜单的样式与二级菜单类似，只是需要将left属性值设置为100%，这样才能将三级菜单的位置放在二级菜单的右侧。同时与二级菜单一样，使用display: none来隐藏初始状态，使用li ul li:hover > ul选择器来显示对应的三级菜单。