纯CSS制作二级导航

最新推荐文章于 2023-07-18 01:12:41 发布

Kong_十六

最新推荐文章于 2023-07-18 01:12:41 发布

阅读量662

点赞数 2

分类专栏： Web—第一阶段 # Web—CSS初级文章标签：二级导航 CSS

本文链接：https://blog.csdn.net/qq_42383764/article/details/104228030

版权

Web—第一阶段同时被 2 个专栏收录

25 篇文章 2 订阅

订阅专栏

Web—CSS初级

21 篇文章 0 订阅

订阅专栏

主要思路：

默认显示一级导航，二级导航隐藏。

当鼠标滑过一级导航时二级导航显示。

主要方法有两种：

a. 一开始设置二级导航display为none、鼠标滑过一级导航时，二级导航display

b. 给二级导航设置绝对定位，left：-1000px，鼠标滑过一级标题时再设置为left：0.

在这里我只实现了第一种方法。就这样自己还搞了半天，中间出出现了一些有关选择器的问题。

主要是在敲代码之前一定要整理好思路，养成一个书写规范的好习惯，还有就是要充分利用开发者工具。

代码走起!!!!!!

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="nav.css">
    <title>Document</title>

</head>
<body>
    <div id="wrap">
        <ul class="nav_out">
            <li><a href="#">首页</a></li>
            <li><a href="#">问答</a></li>
            <li><a href="#">专栏</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">活动</a></li>

            <li><a href="#">发现</a>
                <ul class="nav_in">
                    <li><a href="#1" >圈子</a></li>
                    <li><a href="#1">标签</a></li>
                    <li><a href="#1">酷工作</a></li>
                    <li><a href="#1">排行榜</a></li>
                    <li><a href="#1">笔记</a></li>
                </ul>
            </li>

            <li><a href="#">信息</a>
                <ul class="nav_in">
                    <li><a href="#1">公告</a></li>
                    <li><a href="#1">评论</a></li>
                    <li><a href="#1">关注</a></li>
                    <li><a href="#1">点赞</a></li>
                    <li><a href="#1">私信</a></li>
                </ul>
            </li>
            <li><a href="#">学院</a></li>
            <li><a href="#">下载</a></li>
            <li><a href="#">论坛</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">专题</a></li>
            <li><a href="#">个人</a>
                <ul class="nav_in">
                    <li><a href="#1">我的关注</a></li>
                    <li><a href="#1">我的粉丝</a></li>
                    <li><a href="#1">我的博客</a></li>
                    <li><a href="#1">管理博客</a></li>
                    <li><a href="#1">我的信息</a></li>
                    <li><a href="#1">账号设置</a></li>
                    <li><a href="#1">我的学院</a></li>
                    <li><a href="#1">我的下载</a></li>
                </ul>
            
            </li>
            <li><a href="#">APP</a></li>
        </ul>
    </div>
</body>
</html>

CSS代码：

*{
    margin: 0;
    padding: 0;
}
#wrap{
    width: 1200px;
    height: 80px;
    background-color: red;
    margin: 20px auto;
}

/* 外部导航的设置 */
ul{
    list-style: none;
}
.nav_out{
    overflow: hidden;
}
.nav_out > li{
    float: left;
}

ul.nav_out > li > a{
    display: block;
    font: 22px/80px "微软雅黑";
    text-decoration: none;
    text-align: center;
    color: whitesmoke;
    width: 80px;
    height: 80px;
}
ul.nav_out > li:hover > a{
    background-color: sienna;
    color: white;
}


/* 内部导航设置 */

/* 先隐藏掉内层导航  当鼠标放上时出现 */
ul.nav_in{
    display: none;
}
/* 当鼠标滑过一级导航时，二级导航显示 */
ul.nav_out > li:hover > ul.nav_in{
    display: block;
    background-color: thistle;
    color: azure;
}

#wrap ul.nav_out > li > .nav_in{
    background-color: rgba(236, 61, 61, 0.89);
}
/* 内层导航中连接的样式 */
#wrap ul.nav_out > li > .nav_in >li > a{
    display: block;
    font: 18px/40px "微软雅黑";
    text-decoration: none;
    text-align: center;
    color: rgb(233, 222, 222);
    width: 80px;
    height:40px;
}
/* 选择器一定要写全，不然会出现问题，样式应用不上 */
#wrap ul.nav_out > li >.nav_in > li:hover a{

    color: slategray;
    background-color: rgba(236, 61, 61, 0.89);
}

Kong_十六

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
纯CSS制作二级导航

主要思路：默认显示一级导航，二级导航隐藏。当鼠标滑过一级导航时二级导航显示。主要方法有两种：a. 一开始设置二级导航display为none、鼠标滑过一级导航时，二级导航displayb. 给二级导航设置绝对定位，left：-1000px，鼠标滑过一级标题时再设置为left：0.在这里我只实现了第一种方法。就这样自己还搞了半天，中间出出现了一些有关选择器的问题。...
复制链接

扫一扫