html纯css实现导航栏下拉菜单（带下拉三级菜单）

最新推荐文章于 2024-06-13 09:00:00 发布
最新推荐文章于 2024-06-13 09:00:00 发布
阅读量1.1w 收藏 89
点赞数 17
文章标签： javascript css html html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44432032/article/details/108868383
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body,
        html {
            font-size: 14px;
            font-family: 'Microsoft Yahei', '微软雅黑', 'Simsun', '宋体', 'Arial', sans-serif;
        }
        img {
            border: 0;
        }
        a {
            color: #fff;
            text-decoration: none;
            outline: none;
        }
        ol,
        ul,
        li {
            list-style: none;
        }
        .head-nav {
            width: 100%;
            height: 60px;
            background: #007130;
        }
        .head-nav-con {
            width: 1200px;
            height: 60px;
            margin: auto;
        }
        .head-nav-con ul li {
            width: 170px;
            float: left;
            font-size: 20px;
            text-align: center;
        }
        .head-nav-con ul li:hover {
            background: #ff9c01;
        }
        .head-nav-con ul a {
            display: block;
            text-decoration: none;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .head-nav-con .drop-down {
            position: relative;
        }
        .head-nav-con .drop-down-content {
            padding: 0;
            display: none;
            position: absolute;
            z-index: 1;
            background: #007130;
        }
        .head-nav-con .drop-down-content li:hover > a {
            background-color: #ff9c01;
        }
        .head-nav-con .drop-down:hover .drop-down-content {
            display: block;
        }
        .head-nav-con .drop-down-2 {
            position: relative;
        }
        .head-nav-con .drop-down-content-2 {
            padding: 0;
            display: none;
            position: absolute;
            z-index: 1;
            background-color: #007130;
            right: -170px;
            top: 0;
        }
        .head-nav-con .drop-down-content-2 > li {
            float: none;
            background-color: #007130;
        }
        .head-nav-con .drop-down-content-2 li:hover a {
            background-color: #ff9c01;
        }
        .head-nav-con .drop-down-2:hover .drop-down-content-2 {
            display: block;
        }
    </style>
</head>
<body>
<div class="main">
    <!--头部-->
    <div class="header">
        <div class="head-nav">
            <div class="head-nav-con clearFloat">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li class="drop-down"><a href="#">二级菜单</a>
                        <ul class="drop-down-content">
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                            <li><a href="#">二级菜单</a></li>
                        </ul>
                    </li>
                    <li class="drop-down"><a href="#">二级菜单</a>
                        <ul class="drop-down-content">
                            <li class="drop-down-2"><a href="#">三级菜单</a>
                                <ul class="drop-down-content-2">
                                    <li><a href="#">三级菜单</a></li>
                                    <li><a href="#">三级菜单</a></li>
                                    <li><a href="#">三级菜单</a></li>
                                </ul>
                            </li>
                            <li class="drop-down-2"><a href="#">三级菜单</a>
                                <ul class="drop-down-content-2">
                                    <li><a href="#">三级菜单</a></li>
                                    <li><a href="#">三级菜单</a></li>
                                    <li><a href="#">三级菜单</a></li>
                                </ul>
                            </li>
                            <li class=""><a href="#">二级菜单</a></li>
                            <li class=""><a href="#">二级菜单</a></li>
                            <li class=""><a href="#">二级菜单</a></li>
                            <li class=""><a href="#">二级菜单</a></li>
                            <li class="drop-down-2"><a href="#">三级菜单</a>
                                <ul class="drop-down-content-2">
                                    <li><a href="#">二级菜单</a></li>
                                    <li><a href="#">二级菜单</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#">一级菜单</a></li>
                    <li><a href="#">一级菜单</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>
原克技术
关注
  • 17
    点赞
  • 踩
  • 89
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
css实现导航二级菜单
Ylk_manong的博客
07-10 289
css实现导航二级菜单 *{margin:0; padding:0;} li{list-style: none;} a{text-decoration: none; color: #333;} button{border:none;} input{outline:none;} textarea{resize:none;} em,i{font-style: normal;} .orange{ color: #fa0; } .clearfix::after{ content:""; c
css选项卡做法（下拉菜单导航）
yangyangdt的博客
12-01 1234
css写带下拉菜单的导航，内含完整代码和演示视频。
纯html+css制作三级下拉菜单
11-21
直入主题，html+css制作三级下拉菜单实现代码分享给大家，具体内容如下 1.html代码     XML/HTML Code复制内容到剪贴板 <!DOCTYPE>   <html>   <head>       <meta charset="utf-8">       <title>三级下拉菜单导航栏</title>       <link rel="stylesheet" type="text/css" href="style.css">   </head>   <body bgcolor="aliceblue">  
纯HTML+CSS实现三级下拉式导航菜单
shaowl111的专栏
05-31 9855
直接上代码： &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head runat="server"&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt;&lt;meta http-equiv="X-UA-
HTML+CSS+JS 自定义下拉菜单
最新发布
正在创作系列：【若冰说CSS】
06-13 1126
实现了一个下拉菜单的动画效果，包括一个主按钮和一个下拉菜单列表。点击主按钮会展开下拉菜单列表，同时箭头会旋转，列表项会逐渐显示出来。鼠标悬停在列表上时，会出现一个浮动图标。整个下拉菜单的样式比较简洁，使用了黑色和灰色的背景色，以及白色和淡灰色的文字和图标颜色。动画效果使用了 CSS 的过渡和变换属性。
html5中三级下拉菜单实现案例
大数据-攻城狮
02-21 2130
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;三级下拉菜单&lt;/title&gt; &lt;style&gt; div{margin:30px 180px;} ul{list-style:non
html 三级下拉菜单,css三级下拉菜单实现方法分享
weixin_35695430的博客
06-03 640
复制代码代码如下:test/*设置通配符样式*/*{margin:0;padding:0;}body{font-size:12px;}ul{list-style:none;}a{text-decoration:none;}/*设置二级导航样式*/.nav {width:500px;height:30px;background-color:#b4b4b4;/*导航栏居中*/margin:auto;}...
html制作三级纵向菜单,HTML5实例之CSS3制作的三级下拉菜单（代码）
weixin_42525385的博客
05-30 820
HTML5实例之CSS3制作的三级下拉菜单(代码)三级下拉菜单p{margin:30px 180px;}ul{list-style:none;padding:0px;}ul li{float:left;position:relative;}ul li a{text-decoration:none;background:#a40000;display:block;line-height:40px;t...
纯css实现水平下拉导航菜单
04-07
以上就是使用纯CSS实现一个具有三级下拉功能的导航菜单的基本步骤。当然，实际项目中可能还需要考虑更多的细节，如过渡效果、鼠标离开时的延迟隐藏、菜单项的悬停状态等。通过不断优化和调整，可以打造出符合项目...
php+jQuery实现的三级导航栏下拉菜单显示效果
10-19
本实例通过结合PHP和jQuery，展示了如何实现一个三级导航栏下拉菜单，从而为用户提供更直观的浏览体验。以下是这个实现过程中的关键知识点： **1. PHP数组遍历：** 在`db.php`文件中，我们看到数据被存储在一个多维...
黑色css3导航栏下拉菜单动画特效
11-19
总之，黑色css3导航栏下拉菜单动画特效是通过CSS3的特性实现的，包括选择器、伪类、过渡、布局和动画。掌握这些技能不仅可以提升网站的用户体验，也是网页设计师必备的专业素养。通过实践和学习，你可以创建出更多...
HTML+CSS - 导航栏下拉菜单
12-20
在本主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来创建功能完善的导航栏下拉菜单。 首先，HTML 结构是构建下拉菜单的基础。一个基本的导航栏元素通常由 `nav` 标签包裹，而每个菜单项则由 `ul`（无序列表...
侧边导航栏（抽屉式设计）界面 (html + css)
热门推荐
程序猿追的博客
04-15 2万+
写在前面 哈喽~大家好，这篇呢带来的是侧边导航栏（抽屉式设计），采用 (html + css) 来实现的，编辑器是 WebStorm 。接下来来看看效果吧。 效果 首先我们要导入阿里的图标样式文件（如何使用参考这篇大佬写的博客），将图标样式、字体样式导入到项目中，新建 css 样式文件。 导入 <link rel="stylesheet" href="css/css1.css" type="text/css"> <link rel...
[网页示例]三级联动下拉菜单
Kara_YYDS的博客
10-30 444
【代码】[网页示例]三级联动下拉菜单。
HTML设计一个水平导航栏，完成水平导航栏下拉列表交互效果的实现。
2301_76652768的博客
06-09 6975
完成水平导航栏下拉列表交互效果的实现，（1）使用无序列表ul及嵌套的子列表ul做该导航菜单结构；（2）使用浮动实现主菜单项的水平排列； （3）使用:hover伪类选择器为主菜单项添加鼠标悬停效果（可自定义） （4）使用display 或 visibility 或opacity 属性隐藏子列表菜单 （5）使用:hover伪类选择器添加鼠标悬停时显示子菜单效果 （6）使用:hover伪类选择器添加鼠标悬停在子菜单选项时显示背景颜色和字体颜色改变效果。
HTML＋CSS导航栏及下拉菜单的实现
zhxzrd的博客
04-18 2万+
导航栏是位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，起着链接站点或者软件内的各个页面的作用。 关于位于页面顶部的导航栏究竟是如何实现的，希望下面的代码可以对朋友们有帮助。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书香之家</title> <style type="text/c
纯css制作三级下拉菜单
web_xiaolei的博客
10-12 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是本人用纯css制作的三级下拉菜单效果：思路很简单，三级菜单直接用三层嵌套的ul布局： 电器
实现导航栏下拉菜单（带下拉三级菜单）
10-22 3526
【代码】实现导航栏下拉菜单（带下拉三级菜单）
css二级导航栏下拉菜单
06-09
好的，你可以按照以下步骤实现CSS二级导航栏下拉菜单： 1. 在HTML文件中，用列表实现导航栏，子列表实现下拉菜单，如下所示： ```html <ul class="nav"> <li><a href="#">首页</a></li> <li> <a href="#">产品</a> <ul> <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> </ul> </li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> ``` 2. 在CSS文件中，设置导航栏和下拉菜单的样式，如下所示： ```css .nav { list-style: none; margin: 0; padding: 0; background-color: #333; position: relative; } .nav li { float: left; } .nav li a { display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; } .nav li:hover { background-color: #111; } .nav li:hover > ul { display: block; } .nav ul { display: none; position: absolute; top: 100%; left: 0; background-color: #fff; padding: 0; margin: 0; border: 1px solid #ccc; } .nav ul li { float: none; width: 200px; } .nav ul a { display: block; padding: 10px; color: #333; text-decoration: none; } .nav ul a:hover { background-color: #f2f2f2; } ``` 3. 运行HTML文件，你应该可以看到一个带有下拉菜单的CSS二级导航栏。 希望这可以帮助你实现CSS二级导航栏下拉菜单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

原克技术

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值