HTML+CSS实现下拉三级菜单代码如下：
<!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-UA-Compatible" content="ie=edge">
<title>下拉菜单</title>
</head>
<style>
/*重置浏览器默认样式*/
* {
padding: 0;
margin: 0;
font-family: "Microsoft YaHei";
list-style: none;
}
#main {
width: 100%;
background: #3c3c3c;
}
/* 清楚浮动，使div盒⼦能被撑起来 */
.
clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
overflow: hidden;
clear: both;
}
.menu {
position: relative;
margin-left: 8%;
}
/* 每⼀个li标签的样式 */
.menu li {
width: 130px;
height: 40px;
/* ⾏内⾼度 */
line-height: 40px;
/* ⽂字居中 */
text-align: center;
margin-left: 4%;
}
.
menu>li a {
text-decoration: none;
color: #2aabd2;
}
.menu>li {
/*让⼀级菜单的li浮动*/
float: left;
}
/* ⼆级菜单样式 */
/* ⼆级菜单样式 */
.second-menu {
/
* 将⼆级菜单隐藏 */
display: none;
position: absolute;
}
/* hover属性，⿏标移动到li标签上触发，将对应li标签的⽿机菜单显⽰，移开后恢复到原来样式 */    .menu li:hover>ul {
display: block;
}
.second-menu li a {
color: #0c0c0c;
}
.second-menu {
background: #5a5959;
}
/* 三级标签样式 */
.third-menu {
display: none;
background: #5a5959;
position: absolute;
/* 相对于其⽗标签（⼆级标签）进⾏绝对定位 */
margin-left: 125px;
margin-top: -40px;
}
/
* 三级菜单下的 a标签⽂字颜⾊ */
.third-menu li a {
color: #54afec;
}
.second-menu li:hover ul {
display: block;
}
</style>cssclass属性
<body>
<div id="main" class="clearfix">
<ul class="menu clearfix">
<li>
<a href="#"></a>
</li>
<li>
<a href="#">公司掠影</a>
<ul class="second-menu clearfix">
<li>
<a href="">版权声明</a>
<ul class="third-menu clearfix">
<li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
<li>
<a href="">在线留⾔</a>
<ul class="third-menu clearfix">
<li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</li>
<li>
<a href="">技术⽀持</a>
<ul class="third-menu clearfix">                            <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li>
<a href="#">新闻中⼼</a>
<ul class="second-menu">
<li>
<a href="">版权声明</a>
<ul class="third-menu clearfix">                        <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
<li>
<a href="">在线留⾔</a>
<ul class="third-menu clearfix">                        <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</li>
<li>
<a href="">技术⽀持</a>
<ul class="third-menu clearfix">                        <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">版权声明</a>
</li>
<li>
<a href="#">在线留⾔</a>
<ul class="second-menu">
<li>
<a href="">版权声明</a>
<ul class="third-menu clearfix">                        <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
<li>
<a href="">在线留⾔</a>
<ul class="third-menu clearfix">                        <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</li>
<li>
<a href="">技术⽀持</a>
<ul class="third-menu clearfix">                        <li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">技术⽀持</a></li>
</ul>
</div>
</body>
</html>
效果图如下：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。