二级导航栏

news2025/7/9 9:06:09

简介:本文通过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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/6836.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端CSS射门动画-为梅西最后一届世界杯加油

☆ 距离2022卡塔尔世界杯只有6天时间了&#xff0c;众多球星我喜欢梅西和奥乔亚。 ☆ 我们不能到现场去&#xff0c;只能手中的代码自娱自乐一下&#xff0c;就当为梅西加油了。这是梅西最后一届世界杯了。 梅西给我的感觉&#xff0c;踢球足够利落干净&#xff0c;你不会从他的…

AI遮天传 ML/DL-感知机

感知机的出现是人工智能发展史一大重要里程碑&#xff0c;其后才诞生了&#xff1a;多层感知机、卷积神经网络等一系列的经典网络模型。 在我看来&#xff0c;它虽然是深度学习领域的一大开端&#xff0c;但本身解决的只是线性二分类问题&#xff0c;它本身与机器学习经典模型线…

RORγ 反向激动剂-XY101 小分子化合物

早在 2016 年&#xff0c;中国科学院广州生物医药与健康研究院许永教授团队就曾与加州大学戴维斯分校的陈宏武教授合作&#xff0c;首次发现核激素受体 RORγ 是作用于雄激素受体 AR 上游的关键驱动因子&#xff0c;直接调控雄激素受体 AR 的表达。因此&#xff0c;RORγ 成为前…

gitlab+jenkins+harbor次完整CI链条

用一台机器搭harbor 先安装docker工具&#xff0c;因为装harbor需要docker [rootharbor ~]# cd /etc/yum.repos.d [rootharbor yum.repos.d]# wget https://mirrors.ustc.edu.cn/docker-ce/linux/centos/docker-ce.repo [rootharbor yum.repos.d]# sed -i s#download.docke…

HTML做一个个人博客页面(纯html代码)

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

【网页设计】期末大作业html+css (个人生活记录介绍网站)

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理

CNC程序管理NC文件版本管理CNC程序生命周期管理NC程序版本管理 ROZRZ 数控程序文档流程管理系统能够实现 NC 数控程序文档及流程的管理&#xff0c;且为企业日后能够进行整体生产资料信息的综合管理做好了在程序代码方面的数据准备&#xff0c;提供了更为方便、快捷、安全的系…

Java——后端开发经验总结(持续更新中)

目录 一、判断实体类 二、图片无法正常显示 三、图片路径存储问题 四、xml注释 五、常用快捷键使用 每日三问 重要配置 一、判断实体类 Assert.notNull&#xff1a; 断言某个值是否为空 优点&#xff1a;告别了if判断为空。缺点&#xff1a;场景比较单一&#xff0c;基本…

【JavaSE】继承那些事儿

目录 1. 继承 1.1 为什么要有继承 1.2 何为继承 1.3 继承的语法 1.4 父类成员的访问 1.4.1 子类中访问父类的成员变量 1.4.2 子类中访问父类的成员方法 1.5 super 关键字 1.5.1 super 关键字能让子类访问父类同名成员变量及方法 1.5.2 super 关键字在子类构造方法所起的作用 1…

STC51单片机21——EEPROM测试

STC89C51RC系列单片机内部EEPROM详细地址表&#xff1a; 第一扇区 第二扇区 第三扇区 第四扇区 起始地址 结束地址 起始地址 结束地址 起始地址 结束地址 起始地址 结束地址 2000h 21FFh 22…

node.js的pat/fs/events模块以及磁盘遍历的实现

path模块: 概述: path模块是一个内置模块,他里面内置的相关方法来造作的路径地址 导入path模块: const path require(path) 使用方法: //导入对应的path模块 const pathrequire(path) //相关方法 //1.join方法是将多个相关的地址连接成一个地址 (做路径拼接) let pathStrpath…

2022年下半年系统架构设计师下午真题及答案解析

试题一(25分) 某电子商务公司拟升级其会员与促销管理系统&#xff0c;向用户提供个性化服务&#xff0c;提高用户的粘性。在项目立项之初&#xff0c;公司领导层一致认为本次升级的主要目标是提升会员管理方式的灵活性&#xff0c;由于当前用户规模不大&#xff0c;业务也相对…

2022年数维杯国际大学生数学建模挑战赛开赛公告

各参赛队伍&#xff1a; 为了保证2022年数维杯国际大学生数学建模挑战赛参赛队伍顺利参赛&#xff0c;现将竞赛开赛的相关事项通知如下&#xff1a; 一、时间节点 报名截止时间&#xff1a;北京时间2022年11月17日06:00&#xff08;周四&#xff09; 竞赛开始时间&#xff…

大半夜排查bug:竟然是同事把Redis用成这鬼样子,坑了我

首先说下问题现象&#xff1a;内网sandbox环境API持续1周出现应用卡死&#xff0c;所有api无响应现象。 刚开始当测试抱怨环境响应慢的时候 &#xff0c;我们重启一下应用&#xff0c;应用恢复正常&#xff0c;于是没做处理。但是后来问题出现频率越来越频繁&#xff0c;越来越…

VSCode常用插件

目录1. 简体中文2. git3. 项目文件夹管理4. 文件图标主题5. markdown6. 主题7. Rest API 客户端1. 简体中文 Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 2. git GitLens — Git supercharged 3. 项目文件夹管理 Project Manager&#xff0c;帮助…

MySQL增删改查语句练习(grade表,student表,subjects表,result表)

目录 问题描述 问题分析 1. 添加操作 2. 修改操作 3. 删除操作 问题实现 1. 添加测试数据 2. 根据题目要求完成crud操作 1. 将地址是西安市的更新为西安科技二路 2. 将S1001的email修改为空的字符串 3. 将第二门课的名字更新为 java基础&#xff0c;课时为60 &#…

基于ssm的固定收益营销系统设计与实现(ERP系统)

项目描述 临近学期结束&#xff0c;还是毕业设计&#xff0c;你还在做java程序网络编程&#xff0c;期末作业&#xff0c;老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下&#xff0c;你想解决的问…

5进程创建FORK

文章目录1. fork函数初识2. fork函数返回值1. fork函数初识 fork函数的作用从已存在的进程中创建一个新的进程,而新进程被称为子进程,原进程称为父进程,我们先看一下当执行fork后会发生什么. 分配新的内存块和内核数据结构给子进程将父进程部分数据结构内容拷贝至子进程添加子…

数据库管理系统

简介 数据库管理系统是一种操纵和管理数据库的大型软件&#xff0c;用于建立、使用和维护数据库&#xff0c;简称 DBMS。它对数据库进行统一的管理和控制&#xff0c;以保证数据库的安全性和完整性。[2] 数据库管理系统是一个能够提供数据录入、修改、查询的数据操作软件&…

MySQL约束和表的复杂查询操作

✨博客主页: 心荣~ ✨系列专栏:【MySQL】 ✨一句短话: 难在坚持,贵在坚持,成在坚持! 文章目录一. 数据库约束1. 数据库常用约束2. not null 约束3. unique约束4. default设置默认值5. primary key约束6. 分库分表下的自增主键7. foreign key约束8. 主键,外键,uniqe运用原理二. …