css实现导航菜单下拉效果

最新推荐文章于 2024-03-19 17:43:02 发布
最新推荐文章于 2024-03-19 17:43:02 发布
阅读量5.6w 收藏 228
点赞数 46
分类专栏： css web前端 文章标签： css 导航下拉效果 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/learn_yang/article/details/80675313
版权

通过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：

<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>
如下图，现在导航栏已经有了一些大概的效果了，但是目前来看还是有一些不好看，我们还需要美观一下



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

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

效果如下图，现在我们已经实现了纯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>


learn_yang
关注
  • 46
    点赞
  • 踩
  • 228
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
专栏目录
纯CSS实现导航栏菜单下拉效果
fengxue_snow的博客
07-31 5463
1、效果图 2、代码 <style> /*common css begin*/ *{margin:0px;padding:0px;} body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;} a { color: #666; text-de...
css里nav是什么,css中的nav什么意思.doc
weixin_39949413的博客
08-04 2342
css中的nav什么意思2010-04-16 07:07匿名|分类：Html/Css|浏览3911次css中的nav什么意思我来帮他解答提问者采纳2010-04-16 08:45(一)常用的CSS命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right ce...
黑色css3导航栏下拉菜单动画特效
11-19
黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效 黑色css3导航栏下拉菜单动画特效
纯CSS实现的多级下拉横向导航菜单代码
01-23
纯CSS实现的多级下拉横向导航菜单代码
纯CSS实现导航栏Tab切换效果
最新发布
w3school52的博客
03-19 432
属性以及相邻选择器（Adjacent Sibling Selector）来实现。然后，利用相邻选择器（Adjacent Sibling Selector）和。要实现纯CSS的导航栏Tab切换效果，你可以使用CSS中的。类型作为标签的选项，并通过。属性来实现切换效果。
html导航栏+下拉菜单+表单验证
Golemon的博客
03-13 618
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./bootstrap-5.3.3/dist/css/bootstrap-grid.min.cs
CSS实例(九)：多种菜单效果
无名指的约定
08-19 1882
横向下拉菜单 Html代码   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">   head>   meta http-equiv="Content-Type" content="text/ht
纯css实现水平下拉导航菜单
04-07
纯css实现水平下拉导航菜单是一款css导航菜单制作下拉三级菜单代码下载。
前端学习———用css实现顶部导航条及下拉框
qq_63606575的博客
03-06 4052
css实现顶部导航条及下拉框一、原理二、HTML三、CSS1.设置外部容器样式2.设置内部容器样式3.设置导航条中的元素4.设置下拉框元素5.设置父元素6.效果展示 一、原理 1. 设置外部盒子来充当导航条 2. 设置内部盒子来盛放导航条中元素 3. 导航条中元素使用无序列表并去掉下划线及小圆点，使其浮动以达到水平摆放的效果 4. 鼠标移入时显示下拉框（隐藏元素），则鼠标移入的元素和下拉框元素为兄弟关系，而且两者必须要有相同的父元素 5. 隐藏的元素使用决定定位，兄弟元素使用相对定位，使隐藏的元素相
HTML设计一个水平导航栏，完成水平导航栏下拉列表交互效果的实现。
2301_76652768的博客
06-09 5161
完成水平导航栏下拉列表交互效果的实现，（1）使用无序列表ul及嵌套的子列表ul做该导航菜单结构；（2）使用浮动实现主菜单项的水平排列； （3）使用:hover伪类选择器为主菜单项添加鼠标悬停效果（可自定义） （4）使用display 或 visibility 或opacity 属性隐藏子列表菜单 （5）使用:hover伪类选择器添加鼠标悬停时显示子菜单效果 （6）使用:hover伪类选择器添加鼠标悬停在子菜单选项时显示背景颜色和字体颜色改变效果。
「HTML和CSS入门指南」nav 标签详解
a451319296的博客
06-08 5798
nav 标签是一个重要的标签，用于表示导航链接的区域。在使用 nav 标签时，请注意选择正确的属性和方法、语义化和嵌套，并避免兼容性问题。
HTML+CSS实现导航条及下拉菜单1
青梅煮酒
06-05 9179
1、效果截图 2、html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="main-menu"> <div class="logo"> <p>XXX后台管理系统</p> <
纯CSS实现漂亮的下拉导航效果代码
12-13
本文实例讲述了纯CSS...这是一款纯CSS完成的下拉导航代码，蓝色经典色调，非常大气，适合政府和企业类网站作为顶部的导航菜单，浏览器兼容性完成OK，有需要的朋友可以拿去。 运行效果截图如下： 在线演示地址如下： ...
jquery和css实现图片效果下拉菜单
01-23
jquery和css实现图片效果下拉菜单
CSS3简单实现动画下拉菜单（display:none和CSS3动画之踩坑）
小易的博客
05-26 1万+
文本介绍了采用CSS3的 transform 和 transition 属性来实现下拉菜单的动画效果。 由于css3的动画化和display:block以及display:none这两个属性有所冲突，这里提出了一种解决方法。
学习笔记（6）下拉及多级弹出菜单
weixin_44433499的博客
04-24 586
内容和知识点： 带下拉子菜单的导航菜单 绝对定位和浮动的区别和运用 css自适应宽度滑动门菜单 一、带下拉子菜单的导航菜单 纵向导航教程中已使用过二级导航，今天制作下横向导航菜单的二级菜单，方法和纵向一样，只不过由纵向改变为横向而已。 先在html代码增加二级菜单的代码。 增加完代码后，在浏览器里预览一下： 是不是一看头都大了，怎么变成这样了。我们分析一下错乱的原因。首先我们看下“自适应宽度...
30个漂亮的HTML5和CSS3下拉菜单
刘书的IT博客
12-05 1万+
一些漂亮的HTML5和CSS3下拉菜单列表。这些例子可以帮助你得到灵感。让我们一起来看看这些下拉菜单。  　　Dark Menu: Pure CSS3 Two Level Menu 　　Pure CSS3 LavaLamp Menu 　　HTML5/CSS3 Gray Navigation Menu 　　How to Build and Enhanc
html下拉导航详解,CSS技巧之下拉菜单导航特效详解
weixin_39915204的博客
06-03 510
特效剖析：当鼠标滑过主导航选项时，下拉菜单由上至下依次旋转渐出，当鼠标移开时由下至上依次旋转消逝。步骤一：构建HTML一切菜单项均由无序列表生成，为了便当这里只给首页和关于我们添加了下拉菜单，其他的依据个人需求本人酌情添加即可。步骤二：款式设置1、根本款式初始化根本款式2、通用款式设置：“list-style: none”去掉无序列表默许款式，将一切的列表项(li)设置相同的宽高，行高"line-...
css样式之导航条(nav)
热门推荐
wangchaohpu的博客
09-03 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style type="text/css"&gt;
css水平导航栏下拉菜单
05-24
下面是一个简单的CSS水平导航栏下拉菜单的示例代码： HTML代码： ``` <nav> <ul> <li><a href="#">Home</a></li> <li> <a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">SEO</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> </nav> ``` CSS代码： ``` nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline-block; position: relative; margin-right: 20px; } nav ul li:last-child { margin-right: 0; } nav ul li a { color: #333; text-decoration: none; display: block; padding: 10px; } nav ul li ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); z-index: 1; } nav ul li:hover ul { display: block; } nav ul li ul li { display: block; width: 200px; } nav ul li ul li a { padding: 10px; } ``` 其中，`nav ul` 设置导航栏的样式，`nav ul li` 设置每个导航栏项的样式，`nav ul li a` 设置导航栏项链接的样式，`nav ul li ul` 设置下拉菜单的样式，`nav ul li:hover ul` 设置鼠标悬停在导航栏项上时显示下拉菜单，`nav ul li ul li` 设置下拉菜单项的样式，`nav ul li ul li a` 设置下拉菜单项链接的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 21
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值