html三级菜单

于 2024-07-05 14:02:55 发布
阅读量869 收藏 21
点赞数 8
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70036866/article/details/140206975
版权

示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Menu Example</title>

    <link rel="stylesheet" href="styles.css">

</head>

<style>

    body {

    font-family: Arial, sans-serif;

}

nav.menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

nav.menu a {

    text-decoration: none;

    color: black;

    display: block;

    padding: 10px;

}

/* 一级菜单样式 */

nav.menu > ul > li {

    position: relative;

}

/* 二级菜单样式 */

nav.menu .submenu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background-color: white;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

}

/* 三级菜单样式 */

nav.menu .submenu .submenu {

    top: 0;

    left: 100%;

}

/* 鼠标悬停样式 */

nav.menu ul li:hover > a {

    color: white;

    background-color: #11f;

}

nav.menu ul li:hover > .submenu {

    display: block;

}

/* 基本样式 */

body {

    font-family: Arial, sans-serif;

}

nav.menu ul {

    list-style: none;

    padding: 0;

    margin: 0;

}

nav.menu a {

    text-decoration: none;

    color: black;

    display: block;

    padding: 10px;

}

/* 一级菜单样式 */

nav.menu > ul > li {

    position: relative;

}

/* 二级菜单样式 */

nav.menu .submenu {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    background-color: white;

    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); */

}

/* 三级菜单样式 */

nav.menu .submenu .submenu {

    top: 0;

    left: 100%;

}

/* 鼠标悬停样式 */

nav.menu ul li:hover > a {

    color: white;

    background-color: #521;

}

/* nav.menu ul li:hover > .submenu {

    display: block;

} */

</style>

<body>

    <nav class="menu">

        <ul>

            <li>

                <a href="#">一级菜单</a>

                <ul class="submenu">

                    <li>

                        <a href="#">二级菜单</a>

                        <ul class="submenu">

                            <li><a href="#">三级菜单</a></li>

                            <li><a href="#">三级菜单</a></li>

                        </ul>

                    </li>

                    <li><a href="#">二级菜单</a></li>

                </ul>

            </li>

            <!-- <li><a href="#">一级菜单</a></li> -->

        </ul>

    </nav>

</body>

</html>

​

突然暴富的我
关注
  • 8
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html模版三级菜单
12-23
html模版新增三级菜单，有登录页面和index页面。
通过HTML和CSS实现一个三级菜单
weixin_53428952的博客
09-28 1931
实现二级菜单我有两个思路,一个是将二级菜单display:none,当hover一级菜单的时候,将二级菜单的display:block;当hover一级菜单的时候,二级菜单 height:auto;三级菜单的思路则和设计二级菜单的思路一样,顺着下来就好了,如果要调整一下显示的位置的话,可以使用position调整位置,让菜单看起来更加的美观.本篇文章发布的代码是关于使用html和css实现一个三级菜单列表,在学习的过程中,做一下自己想做的东西,争取以后可以自己做出一个自己的网站来.
如何用HTML写三级菜单
The_Best_Hacker的博客
11-05 6511
【一】源代码：  &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基本结构和HTML基本语法
weixin_34232363的博客
03-29 215
HTML基本结构HTML的基本语法1、<常规标记><标记 属性=“属性值” 属性=“属性值”></标记>标记也可叫标签或叫元素例如：<head></head>2.空标记<标记 属性=“属性值” />例如：<meta charset=”utf-8”>说明：1.写在<>中的第一个单词叫做标记，标签，元素。2...
纯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">  
JS实现三级折叠菜单特效，其它级可自动收缩
01-21
本文实例讲述了JS实现三级折叠菜单特效，其它级可自动收缩。分享给大家供大家参考，很实用,在IE6、IE7、IE8、FF、chrome等浏览器都正常运行具体如下： 小贴士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;...
jQuery左侧下拉三级收缩菜单_jQuery左侧下拉三级收缩菜单_
09-29
在HTML中，我们通常会创建一个`<ul>`元素作为菜单的基础框架，每个层级的菜单项由`<li>`元素表示，一级菜单可能直接嵌套在`<ul>`中，二级和三级菜单则在对应的`<li>`元素中通过`<ul>`嵌套实现。例如： ```html ...
HTML/CSS方法实现三级菜单
XDarker的博客
05-25 2403
<!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+css三级菜单
小武的博客
06-11 3142
效果图如下： 第一种方法：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...
三级级联菜单（JS+HTML)
01-21
自己在二级基础上修改的，亲测可用，欢迎下载！
div+css 纵向三级导航菜单 html代码
10-17
div+css 纵向三级导航菜单 html代码
HTML实现三级菜单代码
最新发布
Hindowlia的博客
10-30 620
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>L12114038张璐</title> <style type="text/css"> #menu { width: 726px; height: 26px; margin: 0px auto;
html如何增加三级菜单,纯css 三级菜单
weixin_34797253的博客
06-09 426
/*添加视觉样式*/.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_...
使用html和css实现一个简单的三级菜单
m0_71491195的博客
07-11 818
三级菜单用到了绝对定位和相对定位相对定位： position: relative;绝对定位:position: absolute;效果图： html全部代码： css全部代码：
前端面试实操题二：用HTML，CSS写一个三级菜单
qq_45259815的博客
07-23 2483
制作一个三级菜单，html，css，主要用display以及定位position
如何用html写三级菜单
zwq123w的博客
11-15 3127
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/nav3.css"> </head> <body> <div class="box"> <div class="t
怎么用html做一个三级菜单栏,只使用H5和CSS3制作带有二三级菜单的导航栏，下面代码怎么改？...
weixin_36155610的博客
06-05 349
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三级菜单横屏显示
04-02
下面是一个简单的HTML三级菜单横屏显示的示例： ``` <!DOCTYPE html> <html> <title>Horizontal Menu body { margin: 0; padding: 0; } nav { background-color: #333; height: 50px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值