css实现导航菜单下拉效果「建议收藏」

css实现导航菜单下拉效果「建议收藏」通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。先上HTML部分<nav><ulclass="level"><li><ahref="">首页</a></li><li>

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

通过css也可以实现简单的导航栏效果,一些不会写js的下伙伴不用担心了。

先上HTML部分

     <nav>
        <ul class="level">
            <li><a href="">首页</a></li>
            <li>
                <a href="">栏目1</a>
                <ul class="two">
                    <li>二级菜单1</li>
                    <li>二级菜单2</li>
                    <li>二级菜单3</li>
                </ul>
            </li>
            <li>
                <a href="">栏目2</a>
                <ul class="two">
                    <li>二级菜单4</li>
                    <li>二级菜单5</li>
                    <li>二级菜单6</li>
                </ul>
            </li>
            <li>
                <a href="">栏目3</a>
                <ul class="two">
                    <li>二级菜单7</li>
                    <li>二级菜单8</li>
                    <li>二级菜单9</li>
                </ul>
            </li>
            <li>
                <a href="">栏目4</a>
                <ul class="two">
                    <li>二级菜单10</li>
                    <li>二级菜单11</li>
                    <li>二级菜单12</li>
                </ul>
            </li>
            <li>
                <a href="">栏目5</a>
                <ul class="two">
                    <li>二级菜单13</li>
                    <li>二级菜单14</li>
                    <li>二级菜单15</li>
                </ul>
            </li>
        </ul>
    </nav>

效果如下图,现在什么样式也没有,我们需要对HTML进行一些样式上的调整让其看起来好看一下。
css实现导航菜单下拉效果「建议收藏」

现附上css:

<style>
    *{padding: 0;margin: 0;}  /* 先重置一下html,消除HTML标签默认的内外边距 */
    .wrap{width: 800px;margin: 0 auto;}    /* 对导航的内容设置一个主体为800px的宽并使其居中 */
    .clear{clear: both;}  /* 清除浮动 */
    a{text-decoration-line: none;}   /* 去掉默认a标签的下划线 */
    ul,li{list-style: none;}
    nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;}
    nav .level>li a{color: black;}
    nav .level>li:hover{background: red;}   /* 设置鼠标滑过后的样式 */

    nav .two{display: none;}  /* 先使二级菜单的内容隐藏 */
    nav .level>li:hover .two{display: block;}   /* 鼠标滑过一级菜单后的显示二级菜单 */
</style>

如下图,现在导航栏已经有了一些大概的效果了,但是目前来看还是有一些不好看,我们还需要美观一下

css实现导航菜单下拉效果「建议收藏」

现在我们要写一下颜色变换和二级导航的样式,话不多说,直接附上代码

 nav .level>li{transition: .4s;}  /* 颜色添加过渡时间     未处理兼容性*/
 nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
 nav .two li:hover{background: pink;}

效果如下图,现在我们已经实现了纯css实现导航栏下拉效果

css实现导航菜单下拉效果「建议收藏」

是不是很简单,有什么不懂的欢迎留言!

最后附上全部的代码

<!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">
    <title>css实现简单的导航栏下拉</title>
</head>
<style>
    *{padding: 0;margin: 0;}  /* 先重置一下html,消除HTML标签默认的内外边距 */
    .wrap{width: 800px;margin: 0 auto;}    /* 对导航的内容设置一个主体为800px的宽并使其居中 */
    .clear{clear: both;}  /* 清除浮动 */
    a{text-decoration-line: none;}   /* 去掉默认a标签的下划线 */
    ul,li{list-style: none;}
    nav .level>li{float: left;width: 16.66%;text-align: center;background: bisque;padding: 10px 0;font-size: 16px;transition: .4s;}
    nav .level>li a{color: black;}
    nav .level>li:hover{background: red;}   /* 设置鼠标滑过后的样式 */

    nav .two{display: none;margin-top: 10px;}  /* 先使二级菜单的内容隐藏 */
    nav .level>li:hover .two{display: block;}   /* 鼠标滑过一级菜单后的显示二级菜单 */
    nav .two li{padding: 5px 0;transition: .4s;cursor: pointer;}
    nav .two li:hover{background: pink;}
</style>
<body>
    <nav>
        <div class="wrap">
            <ul class="level">
                <li><a href="">首页</a></li>
                <li>
                    <a href="">栏目1</a>
                    <ul class="two">
                        <li>二级菜单1</li>
                        <li>二级菜单2</li>
                        <li>二级菜单3</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目2</a>
                    <ul class="two">
                        <li>二级菜单4</li>
                        <li>二级菜单5</li>
                        <li>二级菜单6</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目3</a>
                    <ul class="two">
                        <li>二级菜单7</li>
                        <li>二级菜单8</li>
                        <li>二级菜单9</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目4</a>
                    <ul class="two">
                        <li>二级菜单10</li>
                        <li>二级菜单11</li>
                        <li>二级菜单12</li>
                    </ul>
                </li>
                <li>
                    <a href="">栏目5</a>
                    <ul class="two">
                        <li>二级菜单13</li>
                        <li>二级菜单14</li>
                        <li>二级菜单15</li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159446.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Sublime text3 Version 3.2.1 3207 和 3.2.2 3211(2019-11-06亲测有效)

    Sublime text3 Version 3.2.1 3207 和 3.2.2 3211(2019-11-06亲测有效)Sublimetext3Version3.2.13207激活码许可证(2019-04-30亲测有效)在hosts中添加: 127.0.0.1license.sublimehq.comhosts地址: C:\Windows\System32\drivers\etc点击下载Sublimetext3打开sublime安装文件地址点击下载激活成功教程工具将激活成功教程工具复制到安装文件…

  • 常量池和堆的区别_字符串常量池在堆中还是方法区

    常量池和堆的区别_字符串常量池在堆中还是方法区写在前面:博主是一位普普通通的19届二本大学生,平时最大的爱好就是听听歌,逛逛B站。博主很喜欢的一句话花开堪折直须折,莫待无花空折枝:博主的理解是头一次为人,就应该做自己想做的事,做自己不后悔的事,做自己以后不会留有遗憾的事,做自己觉得有意义的事,不浪费这大好的青春年华。博主写博客目的是记录所学到的知识并方便自己复习,在记录知识的同时获得部分浏览量,得到更多人的认可,满足小小的成就感,同时在写博客的途中结交更多志同道合的朋友,让自己在技术的路上并不孤单。目录:1.常量池与Class常量池2.运.

  • vim查看空格回车符号_linux vi 替换字符串

    vim查看空格回车符号_linux vi 替换字符串参考链接https://blog.csdn.net/qq_30038111/article/details/83447045答案就是需要转义

  • 创建eureka注册中心_微服务注册中心和网关

    创建eureka注册中心_微服务注册中心和网关目录关于SpringCloud版本单机模式Eureka注册中心搭建引入Eureka-Server依赖创建启动类添加配置高可用Eureka注册中心搭建双节点注册中心修改配置文件修改hosts文件启动测试多节点注册中心修改配置文件启动测试常见问题参考文章SpringCloud是一系列框架的集合,它利用SpringBoot的开发便利性巧…

  • 贪吃蛇(C语言实现)

    贪吃蛇(C语言实现)文章目录游戏说明游戏效果展示游戏代码游戏代码详解游戏框架构建隐藏光标光标跳转初始化界面初始化蛇颜色设置随机生成食物打印蛇与覆盖蛇移动蛇执行按键判断得分与结束游戏主体逻辑函数从文件读取最高分更新最高分到文件主函数游戏说明游戏效果展示游戏代码游戏代码详解游戏框架构建隐藏光标光标跳转初始化界面初始化蛇颜色设置随机生成食物打印蛇与覆盖蛇移动蛇执行按键判断得分与结束游戏主体逻辑函数从文件读取最高分更新最高分到文件主函数…

  • siamFC_mfc实现平移的代码

    siamFC_mfc实现平移的代码Toinvestigatetheunderlyingreason,weanalyzetheSiamesenetworkarchitectureandidentifythatthereceptivefieldsizeofneurons,networkstrideandfeaturepaddingarethreeimportantfactorsaff…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号