<!DOCTYPE html>
<html lang="en">
<head>
<title>三级导航栏作业</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
width: 120px;
height: 50px;
color: white;
line-height: 50px;
}
.first>li {
float: left;
margin-right: 10px;
}
.second>li {
background-color: green;
}
ul {
width: 1000px;
margin: auto;
text-align: center;
}
.active {
background-color: red;
}
.second {
display: block;
display: none;
}
.nav {
background-color: #2b2b2b;
}
.first>li:hover {
background-color: red;
color: green;
}
.second>li:hover {
background-color: purple;
position: relative;
}
.first>li:hover .second {
display: block;
}
.third {
position: absolute;
left: 120px;
top: 0;
display: none;
}
.third>li {
background-color: pink;
}
.second>li:hover .third {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul class="first">
<li class="active">
<p>首页</p>
<ul class="second">
<li>
<p>首页二级菜单</p>
<ul class="third">
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
</ul>
</li>
<li>
<p>首页二级菜单</p>
<ul class="third">
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
<li>首页的三级菜单</li>
<li>首页的
最低0.47元/天 解锁文章
9053
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
