二级导航栏

极客李华

已于 2024-02-01 01:01:57 修改

阅读量2.8k

点赞数 6

分类专栏： CSS常见小案例文章标签： css css3 html

于 2022-11-15 15:24:26 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127866771

版权

CSS常见小案例专栏收录该内容

22 篇文章 13 订阅

订阅专栏

作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
座右铭：未来是不可确定的，慢慢来是最快的。
个人主页：极客李华-CSDN博客
合作方式：私聊+
这个专栏内容：BAT等大厂常见后端java开发面试题详细讲解，更新数目100道常见大厂java后端开发面试题。
我的CSDN社区：https://bbs.csdn.net/forums/99eb3042821a4432868bb5bfc4d513a8
微信公众号，抖音，b站等平台统一叫做：极客李华，加入微信公众号领取各种编程资料，加入抖音，b站学习面试技巧，职业规划

简介：本文通过HTML与CSS相集合的方式，来实现二级导航菜单。

HTML构建骨架

<body>
    <ul class="nav1">
        <li>水果
            <ul class="nav2">
                <li>苹果</li>
                <li>香梨</li>
                <li>火龙果</li>
                <li>香蕉</li>
            </ul>
        </li>
        <li>蔬菜
            <ul class="nav2">
                <li>西红柿</li>
                <li>土豆</li>
                <li>青菜</li>
                <li>洋葱</li>
            </ul>
        </li>
        <li>日用品
            <ul class="nav2">
                <li>毛笔</li>
                <li>盆子</li>
                <li>筒子</li>
                <li>菜刀</li>
            </ul>
        </li>
        <li>影视作品
            <ul class="nav2">
                <li>动漫</li>
                <li>电影</li>
                <li>电视剧</li>
                <li>戏剧</li>
            </ul>
        </li>
    </ul>
</body>

CSS渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    body{
            background: url(imgs/img.jpg);
            /* 设置背景铺满 */
            background-repeat:no-repeat;
            background-size:100%;

        }
        
    * {
        margin: 0;
        padding: 0;
    }
    
    .nav1 {
        list-style: none; /*清除列表样式*/
        display: flex; /*弹性盒子布局*/
        width: 100%;
    }
    
    .nav1>li {
        width: 100px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        flex: 1; /*关键语句*/
    }
    
    .nav2>li {
        height: 0;
        background-color: skyblue;
        overflow: hidden; /*溢出隐藏 通过设置height:0 来让内容溢出 然后通过溢出隐藏来隐藏二级菜单/
        margin-top: 3px; /*设置上方的外边距*/
        transition: 1s; /*设置出现延迟时间*/
    }
    
    .nav1>li:hover .nav2>li { /*一级导航栏hover的时候 二级导航栏的情况*/
        height: 50px;
    }
    
    .nav1>li:hover { /*一级导航栏悬浮的时候的状态*/
        background-color: pink;
        height: 50px;
    }
</style>

</head>
<body>
    <ul class="nav1">
        <li>水果
            <ul class="nav2">
                <li>苹果</li>
                <li>香梨</li>
                <li>火龙果</li>
                <li>香蕉</li>
            </ul>
        </li>
        <li>蔬菜
            <ul class="nav2">
                <li>西红柿</li>
                <li>土豆</li>
                <li>青菜</li>
                <li>洋葱</li>
            </ul>
        </li>
        <li>日用品
            <ul class="nav2">
                <li>毛笔</li>
                <li>盆子</li>
                <li>筒子</li>
                <li>菜刀</li>
            </ul>
        </li>
        <li>影视作品
            <ul class="nav2">
                <li>动漫</li>
                <li>电影</li>
                <li>电视剧</li>
                <li>戏剧</li>
            </ul>
        </li>
    </ul>
</body>

</html>