如何用HTML写三级菜单

最新推荐文章于 2023-10-30 18:44:29 发布
最新推荐文章于 2023-10-30 18:44:29 发布
阅读量6.4k 收藏 39
点赞数 3
分类专栏： javaWeb阶段 文章标签： Java HTML css

【一】源代码： 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/nav3.css">
    <style>
        html,body{
            height:100%;
        }
        *{
            padding:0;
            margin:0;
        }
        a{
            text-decoration:none;
        }
        .box{
            width:100px;
            /*加上这是横着排的导航*/
            float:left;
            margin-left:1px;
        }
        .tit1,.tit2,a{
            height:40px;
            width:100px;
            color:white;
            line-height:40px;
            text-align:center;
        }
        .tit1{
            background:black;
            font-size:18px;
        }
        .tit1:hover{
            background:orange;
            color:black;
            font-size:18px;
        }
        .box:hover .tit2{
            display:block;
        }
        .tit2{
            background:blue;
            display:none;
            position:relative;
        }
        .tit2:hover{
            background:cyan;
            color:black;
            font-size:18px;
        }
        .tit2:hover a{
            display:block;
        }
        .tit3{
            position:absolute;
            left:100px;
            top:0;
        }
        a{
            background:green;
            display:none;
            font-size:16px;
        }
        a:hover{
            background:purple;
            color:white;
            font-size:18px;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
<div class="box">
    <div class="tit1">一级菜单</div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
    <div class="tit2">
        <p>二级菜单</p>
        <div class="tit3">
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
            <a href="">三级菜单</a>
        </div>
    </div>
</div>
</body>
</html>

【二】输出样式：

原文转自：https://blog.csdn.net/zwq123w/article/details/78543833 

The_Best_Hacker
关注
  • 3
    点赞
  • 踩
  • 39
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何用html写一个导航栏的三级菜单
m19940107的博客
04-04 1479
<!DOCTYPE html> <html lang="en"> <head> <title>三级导航栏作业</title> <style> * { margin: 0; padding: 0; } li { list-style: none; width: 120px; height: 50px; colo...
HTML实现三级导航菜单栏
Mortal__的博客
11-15 9052
HTML实现三级导航菜单栏 实现效果： 注意： 实现完成代码功能需要引入reset.css以重置浏览器内置格式。 代码部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="/HTML+CSS exercise/reset.css"> <title>三级菜单导航条<
纯html+css制作三级下拉菜单
09-24
主要介绍了纯html+css制作三级下拉菜单，如何制作下拉菜单效果，三级下拉菜单又是怎么实现的，本文为大家揭晓，感兴趣的小伙伴们可以参考一下
html模版三级菜单
12-23
html模版新增三级菜单，有登录页面和index页面。
HTML基本结构和HTML基本语法
weixin_34232363的博客
03-29 208
HTML基本结构HTML的基本语法1、<常规标记><标记 属性=“属性值” 属性=“属性值”></标记>标记也可叫标签或叫元素例如：<head></head>2.空标记<标记 属性=“属性值” />例如：<meta charset=”utf-8”>说明：1.写在<>中的第一个单词叫做标记，标签，元素。2...
通过HTML和CSS实现一个三级菜单
weixin_53428952的博客
09-28 1887
实现二级菜单我有两个思路,一个是将二级菜单display:none,当hover一级菜单的时候,将二级菜单的display:block;当hover一级菜单的时候,二级菜单 height:auto;三级菜单的思路则和设计二级菜单的思路一样,顺着下来就好了,如果要调整一下显示的位置的话,可以使用position调整位置,让菜单看起来更加的美观.本篇文章发布的代码是关于使用html和css实现一个三级菜单列表,在学习的过程中,做一下自己想做的东西,争取以后可以自己做出一个自己的网站来.
HTML实现三级菜单代码
Hindowlia的博客
10-30 595
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>L12114038张璐</title> <style type="text/css"> #menu { width: 726px; height: 26px; margin: 0px auto;
[网页示例]三级联动下拉菜单
最新发布
Kara_YYDS的博客
10-30 444
【代码】[网页示例]三级联动下拉菜单。
Bootstrap左侧下拉三级菜单导航
11-19
Bootstrap是一款广泛应用于网页开发的前端...总之，Bootstrap左侧下拉三级菜单导航的创建涉及HTML结构、Bootstrap类的使用、以及可能的JavaScript交互。通过熟练掌握这些知识点，可以构建出高效且用户友好的网站导航。
jquery横向下拉三级菜单效果
06-06
本资源“jquery横向下拉三级菜单效果”提供了一种高效的解决方案，利用jQuery库实现了一个流畅、美观的横向下拉三级菜单。下面我们将详细探讨这一技术实现及其应用。 jQuery是一个轻量级、功能丰富的JavaScript库，...
jQuery左侧下拉三级收缩菜单_jQuery左侧下拉三级收缩菜单_
09-29
在HTML中，我们通常会创建一个`<ul>`元素作为菜单的基础框架，每个层级的菜单项由`<li>`元素表示，一级菜单可能直接嵌套在`<ul>`中，二级和三级菜单则在对应的`<li>`元素中通过`<ul>`嵌套实现。例如： ```html ...
使用html和css实现一个简单的三级菜单
m0_71491195的博客
07-11 809
三级菜单用到了绝对定位和相对定位相对定位： position: relative;绝对定位:position: absolute;效果图： html全部代码： css全部代码：
HTML/CSS方法实现三级菜单
XDarker的博客
05-25 2375
<!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...
html多级侧边菜单,css3多级菜单导航栏、侧边菜单栏
weixin_39949673的博客
06-25 1790
一、简单的导航栏首先通过一个入门级的导航栏来练习一下1、先布局好html的结构2、通过css样式得到想要的导航效果上面第一个例子让大家简单的了解了菜单栏的原理，在不同过js的情况下，就可以轻松实现二级菜单栏，三级菜单也可以在此基础上添加。至于一些细节的处理，就要靠大家自己去调整了。在例子一中，其实还有个坑，就是在二级菜单展示之后，会影响下方容器的布局。从上图中可以很清楚的看到，子菜单在隐藏和显示的...
前端面试实操题二：用HTML，CSS写一个三级菜单
qq_45259815的博客
07-23 1805
制作一个三级菜单，html，css，主要用display以及定位position
纯html+css三级菜单
小武的博客
06-11 3125
效果图如下： 第一种方法：ul li #nav {line-height: 72px; list-style-type: none;color:#ffffff} #nav a {display: block; width: 150px; text-align:center; height:72px;color:#ffffff} #nav a:link { text-deco...
html如何增加三级菜单,纯css 三级菜单
weixin_34797253的博客
06-09 396
/*添加视觉样式*/.multi_drop_menu {font:1em helvetica,arial,sans-serif;}.multi_drop_menu a {display:block;color:#555;background-color:#eee;padding:0.2em 1em;border-width:3px;border-color:transparent;}.multi_...
后台管理页面左侧导航栏
热门推荐
小白学习
07-30 2万+
效果图： HTML： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;jQuery后台左侧伸缩菜单代码 - 站长素材&lt;/title&gt; &lt;link rel="stylesheet" type="te
怎么用html做一个三级菜单栏,只使用H5和CSS3制作带有二三级菜单的导航栏，下面代码怎么改？...
weixin_36155610的博客
06-05 328
ddddddbody{margin:0;padding:0;width:100%;height:100%;background:#47c9af;;color:#74777b;font-weight:500;font-size:1em;font-family:'Raleway', Arial, sans-serif;}a:link,a:visited{text-decoration:none;lis...
用html写一个二级菜单
03-29
以下是一个简单的HTML代码，用于创建一个...这个代码创建了一个简单的二级菜单，包含四个菜单项和每个菜单项下的三个子菜单项。CSS样式定义了菜单的外观和行为。当鼠标悬停在菜单项上时，它下面的子菜单项会显示出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值