二级导航栏

作者简介：一名后端开发人员，每天分享后端开发以及人工智能相关技术，行业前沿信息，面试宝典。
座右铭：未来是不可确定的，慢慢来是最快的。
个人主页：极客李华-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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>Documenttitle>
    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

最后的结果展示：
在这里插入图片描述

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。

相关阅读:
11种增加访问者在网站上平均停留时间的技巧
 shell脚本编写基础实战
 docker之dockerFile
苍穹外卖(七) Spring Task 完成订单状态定时处理
 使用 MySQL 慢速查询日志
 LeetCode75——Day7
【Node.js】02 —— Path模块全解析
 python异步编程之asyncio低阶API
麒麟Arm64nacos打包docker镜像说明
 小黑leetcode之旅,然后要和学长吃串串香啦:876. 链表的中间结点
原文地址：https://blog.csdn.net/qq_51447496/article/details/127866771