HTML实现三级导航菜单栏
2024-04-25 07:37:01
实现效果：
注意：
实现完成代码功能需要引入
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="#">三级菜单</a></li></ul></li></ul></li><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="#">三级菜单</a></li></ul></li></ul></li><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="#">三级菜单</a></li></ul></li></ul></li><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="#">三级菜单</a></li></ul></li></ul></li><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="#">三级菜单</a></li></ul></li></ul></li><li class="border1 "><a href="#">一级菜单</a><ul class="nav2" ><li><a href="#">二级菜单</a><ul class=" last"><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="last"><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="last"><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="last"><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="last"><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></ul></li></ul>
</body>
</html>
HTML实现三级导航菜单栏相关推荐
- java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
- 【最全最详细】使用publiccms实现动态可维护的导航菜单栏
" 大家好,我是雄雄,欢迎关注微信公众号:????**雄雄的小课堂????. " ????????前言 昨天,给大家整理的是通过publiccms实现动态可维护的轮播图,有需要的 ...
- html鼠标滑过导航条展开导航条,jquery css实现鼠标滑过导航菜单栏动画效果
对于导航栏的实现对于前端人员来说再简单不过了,但是如何让我们的导航看起来生动,给用户一种很高大上的感觉,却需要我们好好设计一下.今天我给大家带来的是我自己在项目中用到的一个例子,当我们鼠标滑过导航栏时 ...
- Axure 9 实战案例，动态面板的应用 6，导航菜单栏的手风琴效果
前言 Hello!欢迎来到Axure 9 实战案例教程专栏.点击了解课程简介>> 我们接着再继续学习动态面板的应用,本篇课程我们来讲解一下,如何运用动态面板绘制导航菜单栏的手风琴效果. 我 ...
- 【京东商城首页实战9】导航菜单栏和下拉列表
接下来开始做下面的部分,包括红色背景部分.导航菜单栏.右边的图片,如图: 图1 分析: 1.构架:全部商品分类是一个盒子.导航菜单是一个盒子,图片是一个盒子. 2.点击红色部分会出现下拉列表,从语义上 ...
- php添加导航,wordpress网站导航栏如何添加导航菜单栏
一个网站,一般都会有自己的导航菜单栏,这样方便用户分类查找.那么,在使用wordpress建站时,导航菜单一般都是能直接在后台设置的,也不需要其他插件或动作.现在我就以个人经验教大家wordpress ...
- 静态html左侧导航菜单代码,Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码...
本文介绍了Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码,分享给大家,具体如下: PC端 移动端 代码 左侧导航 *{ margin:0; padding:0; } #header ...
- 竖直手风琴导航菜单栏
之前有用原生js实现了菜单栏的展开收缩效果,今天用jquery实现这个效果, 并增加了鼠标点击箭头方向改变的效果. <!DOCTYPE html> <html lang=" ...
- 隐藏百度地图导航菜单栏
在Android开发中,如果需要实现导航功能,我们可能会用到百度地图或者高德地图提供的API,百度地图导航界面大致是这样: 界面上方是导航路线信息,中间是导航地图,底部是导航的菜单栏,包括关闭导航的按 ...
- Qt侧边垂直导航菜单栏Demo
目录 1.最终效果展示 2.应用场景与实现原理 3.运行构建环境 4.源代码展示 5. 项目文件下载地址 1.最终效果展示 图1.结果展示 2.应用场景与实现原理 Qt自带菜单栏方向是水平方向,在一些 ...
最新文章
- 施工日志管理软件app_康智颐app下载-康智颐客户端下载v1.4.9 安卓官方版
- Error: Loading chunk * failed，Vue Router懒加载报错问题解决方案
- Medium上关于git的文章
- 【转载】socket as an IPC
- 一位校长写给大学学生的一封信
- n平方的求和公式_极限求解--数列前n项和公式推导（补充知识）
- Linux下Select多路复用实现简易聊天室
- Python金融数据挖掘 第11章 复习思考题3 某年各省级行政区环境污染状况的统计数据(已经过标准化处理)，现采用K均值聚类方法，编写Python程序将省级行政区分成4类。
- 《企业财务报表分析》学习笔记
- STM32学习记录0010——TFTLCD液晶显示屏
- Intel VT学习笔记（八）—— 开启EPT
- 使用Frida hook 获取native层代码的返回值
- java获取当前日期，前一天，前N天，去年同期等日期
- 百度网盘_SEARCH
- co作为前缀的意思_卡西欧G-SHOCK型号解析大全 看懂前缀的字母 省的被忽悠
- java实行excel cell内换行
- 计算机网络安全在电子商务中的应用 魏娟,[网络安全最新技术论文]网络安全技术探究...
- 【MATLAB图像融合】[14]PCNN脉冲耦合神经网络代码分享
- Altium Designer(AD)多边形铺铜
- 多项式计算的两种方法（包含秦九韶公式）