二级导航用CSS的实现方法

首先写个基本结构：

<div class="father">
    父盒子
    <div class="son">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
        <a href="#">链接4</a>
        <a href="#">链接5</a>
    </div>
</div>

然后随便搞点样式：

.father {
    /* 因为子盒子我用了一个position: absolute;绝对定位，所以父盒子也要来一个position，所以这里就用了相对定位 */
    position: relative;
    width: 100px;
    height: 30px;
    padding: 5px 0px;
    font-size: 25px;
    text-align: center;
    background-color: #eeeeee;
}
.son {
    /* 用绝对定位调整子盒子的位置 */
    position: absolute;
    top: 40px;
    left: 1px;
    text-align: center;
    border: 1px solid #ff0000;
}
.son a {
    display: block;
    padding: 5px 15px;
    font-size: 25px;
    text-decoration: none;
    color: #000000;
}
.son a:hover {
    color: #ff0000;
}

现在运行结果如下：

在这里插入图片描述

核心部分：

要实现二级导航，我们需要让子盒子隐藏起来，然后鼠标经过父盒子时让子盒子显示出来，就可以实现这个二级导航的效果了

这部分代码如下：

.son {
    /* 将子盒子隐藏起来 */
    display: none;
    /* 用绝对定位调整子盒子的位置 */
    position: absolute;
    top: 40px;
    left: 1px;
    text-align: center;
    border: 1px solid #ff0000;
}

.father:hover .son {
    /* 鼠标经过父盒子时让子盒子显示出来 */
    display: block;
}

这样这个二级导航就做好了

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            /* 因为子盒子我用了一个position: absolute;绝对定位，所以父盒子也要来一个position，所以这里就用了相对定位 */
            position: relative;
            width: 100px;
            height: 30px;
            padding: 5px 0px;
            font-size: 25px;
            text-align: center;
            background-color: #eeeeee;
        }

        .son {
            /* 将子盒子隐藏起来 */
            display: none;
            /* 用绝对定位调整子盒子的位置 */
            position: absolute;
            top: 40px;
            left: 1px;
            text-align: center;
            border: 1px solid #ff0000;
        }

        .son a {
            display: block;
            padding: 5px 15px;
            font-size: 25px;
            text-decoration: none;
            color: #000000;
        }

        .son a:hover {
            color: #ff0000;
        }

        .father:hover .son {
            /* 鼠标经过父盒子时让子盒子显示出来 */
            display: block;
        }
    </style>
</head>

<body>
    <div class="father">
        父盒子
        <div class="son">
            <a href="#">链接1</a>
            <a href="#">链接2</a>
            <a href="#">链接3</a>
            <a href="#">链接4</a>
            <a href="#">链接5</a>
        </div>
    </div>
</body>

</html>

60rzvvbj

发布了5 篇原创文章 · 获赞 17 · 访问量 1339

私信关注

二级导航用CSS的实现方法

首先写个基本结构：

然后随便搞点样式：

现在运行结果如下：

核心部分：

这部分代码如下：

这样这个二级导航就做好了

完整代码如下：

猜你喜欢