HTML实现三级导航菜单栏

最新推荐文章于 2023-10-30 15:11:44 发布
VIP文章 最新推荐文章于 2023-10-30 15:11:44 发布
阅读量8.8k 收藏 52
点赞数 7
分类专栏： HTML+CSS 文章标签： html html5 css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mortal__/article/details/109705834
版权

实现效果：

注意：

实现完成代码功能需要引入reset.css以重置浏览器内置格式。

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/HTML+CSS exercise/reset.css">
    <title>三级菜单导航条</title>
    <style>
        .nav1{
    
            /*ul*/
            width: 1200px;
            margin: 0 auto;
            list-style: none;
        }
 
        .border1:last-child{
    
            border-right:none;
        }
        .nav1 li{
    
            float: left;
            line-height: 48px;
        }
        a{
    
            display: block;
            height: 48px;
            background-color: #ccc;
            text-decoration: none;
            color: #777777;
            padding: 0 68px 0 68px;
        }
        .nav1 a:hover{
    
            background-color:#696969 ;
            color: #e8e7e3;
        }
        .nav2{
    
            position: absolute;
            width: 200px;
            display: none;
        }
        .nav1 li:hover .nav2 ,.nav2 li:hover .nav3,.nav2 li:hover .last{
    
			display: block;
        }
        .nav3{
    
            position: absolute;
            width: 200px;
            left: 200px;
            /*菜单上移一格*/
            margin-top: -48px;
            display: none;
        }
        .last{
    
            position: absolute;
            width: 200px;
            right: 200px;
            margin-top: -48px;
            display: none;
        }
        
    </style>
</head>
<body>
    <ul class="nav1">
        <li class="border1">
            <a href="#">一级菜单</a>
            <ul class="nav2">
                <li>
                    <a href="#">二级菜单</a>
                    <ul class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                    <ul class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                    <ul class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">二级菜单</a>

                    <ul class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">二级菜单</a>
                    <ul class="nav3">
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href="#">三级菜单</a></li>
                        <li><a href=
最低0.47元/天 解锁文章
Mortal__
关注
  • 7
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery后台左侧三级导航菜单
11-19
jQuery后台左侧三级导航菜单 jQuery后台左侧三级导航菜单 jQuery后台左侧三级导航菜单 jQuery后台左侧三级导航菜单
纯CSS实现的三级导航菜单效果代码
09-24
主要为大家介绍了纯CSS实现的三级导航菜单效果代码,通过css控制页面元素样式实现三级导航菜单效果,非常简单实用,需要的朋友可以参考下
HTML+CSS 三级导航栏
djuntu9730的博客
12-23 511
一、代码部分： 1、CSS部分： <style type="text/css"> *{margin:0px;padding: 0px;} #daohang{background:#00BFFF;height: 40px;} #shouye{background: #1E90FF;margin-left: 0px} #daohang ul{height: 100%;}...
ios微信浏览器-div设置滚动-不出现滚动条的解决办法
一叶扁舟
02-14 6521
.scrolldiv{ height: 85%; overflow: hidden; overflow-y: scroll; } .scrolldiv::-webkit-scrollbar-track-piece { background-color: #FFF; border-left: 1px solid #FFF; } .scrolldiv::-webkit-scrollbar {
初级-零基础-web前端开发 HTML+CSS+JAVASCRIPT 二级/三级导航菜单(参考案例)
极客小俊
07-24 1549
作者：极客小俊 一个把逻辑思维转变为代码的技术博主 不废话了 直接上代码: HTML部分 <div id="menu"> <ul id="menu_sub"> <li class="first-list"> <a herf=''>菜单1</a> <ul class="sub1"> <li class="second-list.
如何用HTML写三级菜单
The_Best_Hacker的博客
11-05 6357
【一】源代码：  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;link rel="stylesheet" hr
HTML实现三级菜单代码
Hindowlia的博客
10-30 484
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>L12114038张璐</title> <style type="text/css"> #menu { width: 726px; height: 26px; margin: 0px auto;
html模版三级菜单
12-23
html模版新增三级菜单，有登录页面和index页面。
html三级导航栏编写
JackieDYH的博客
02-09 2547
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三级导航</title> <style> * { margin:0; padding:0; } ul,ol,li { list-styl...
html多级侧边菜单,css3多级菜单导航栏、侧边菜单栏
weixin_39949673的博客
06-25 1741
一、简单的导航栏首先通过一个入门级的导航栏来练习一下1、先布局好html的结构2、通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理，在不同过js的情况下，就可以轻松实现二级菜单栏，三级菜单也可以在此基础上添加。至于一些细节的处理，就要靠大家自己去调整了。在例子一中，其实还有个坑，就是在二级菜单展示之后，会影响下方容器的布局。从上图中可以很清楚的看到，子菜单在隐藏和显示的...
html+js实现地区三级联动下拉菜单
05-14
html+js实现地区三级联动下拉菜单代码和示例(无数据库，且包括中国所有地区),运行效率非常高，可以在所有的web程序中应用，非常方便，这是我自己开发的，希望大家能够喜欢。
layui实现三级导航菜单
12-12
本文实例为大家分享了layui实现三级导航菜单的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=...
html实现好看的多种风格导航菜单(源码)
06-29
html实现好看的多种风格导航菜单(附源码)，导航菜单，源码下载，分为顶部导航菜单,悬浮按钮菜单,右键功能菜单,左侧导航菜单四种导航菜单。每种导航菜单有至少三种风格，总共23种风格，各种风格都有，代码上手简单，...
纯html+css制作三级下拉菜单
11-21
直入主题，html+css制作三级下拉菜单实现代码...三级下拉菜单导航栏</title>  <link rel="stylesheet" type="text/css" href="style.css">  </head>  <body bgcolor="aliceblue"> 
纯CSS实现横向三级菜单导航栏
06-28
纯使用CSS技术实现三级联动导航菜单栏，有需要的盆友可以下载试试看，保证可以正常运营，查看三级联动的效果！
HTML5之横向二三级,纵向三级导航栏
我不是秃头的博客
10-18 5288
横向二级导航栏 HTML代码 <div id="nav"> <ul> <li><a href="#">学院首页</a></li> <li><a href="#">招生就业</a> <ul> <li><a href="#">招生信息</a></li> <li><a href="#
html三级模板,【CSS】纯CSS实现三级导航（模板）_html/css_WEB-ITnose
weixin_39537397的博客
06-08 454
以前觉得级联导航实现应该很简单，就是使用css的hover属性来实现就可以了，于是也没有过多地留意实践。可是在最近的面试当中，当被问到这个问题的时候才明白，很多东西不能想当然地以为这样做就可以了，不单只是知道大概的思路就认为OK了，更需要实际的动手能力。后来就实际操作了级联菜单的实现，借此机会把它弄成一个模板来和大家一起学习。以下是HTML部分：CSS部分：body,div,ul,li,a{mar...
纯手工 css+html 简易三级导航栏（横向）
weixin_34067980的博客
04-14 825
本人菜鸟，写这个一方面是为了自己以后也能复习，另一方面也许能帮助一些需要的朋友……大神请忽视我！ 昨天闲着无聊，想着用css+html做一个横向的导航栏。。。。。其实之前也尝试过，可是总是失败或者说二级导航栏不能按自己想要的位置摆放，现在终于有点明白了——就是position这个家伙捣的鬼！ 要想二级菜单放在一级菜单下面，有几点需要注意： 　①：一级菜单的li中要设置position:rel...
vue-element设置三级菜单栏，页面空白解决办法
changyana的博客
12-26 2109
设置二级的时候，页面都可以正常加载，然后把二级可以加载出的页面放在三级菜单栏后，加载出来就是空白的了，什么都没有，在控制台看，app-main里的内容什么都没有，不会渲染出页面。
html导航栏三级菜单
最新发布
12-23
以下是一个示例的HTML导航栏三级菜单的代码： ```html <!DOCTYPE html> <html> <head> <style> /* 样式可以根据需要进行自定义 */ .nav { list-style-type: none; margin: 0; padding: 0; } .nav li { position: relative; display: inline-block; background-color: #f4f4f4; padding: 10px; } .nav li:hover { background-color: #ccc; } .nav ul { display: none; position: absolute; left: 100%; top: 0; background-color: #f4f4f4; padding: 10px; } .nav li:hover > ul { display: block; } </style> </head> <body> <ul class="nav"> <li>一级菜单1 <ul> <li>二级菜单1 <ul> <li>三级菜单1</li> <li>三级菜单2</li> <li>三级菜单3</li> </ul> </li> <li>二级菜单2</li> <li>二级菜单3</li> </ul> </li> <li>一级菜单2</li> <li>一级菜单3</li> </ul> </body> </html> ``` 这段代码创建了一个简单的HTML导航栏三级菜单。当鼠标悬停在一级菜单上时，会显示出对应的二级菜单，再悬停在二级菜单上时，会显示出对应的三级菜单。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值