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>

<style>

a {

color: #FFFF99;

text-decoration: none;

}

a:hover {

color: #FFFFFF;

text-decoration: underline;

}

.top-nav {

font-size: 16px;

font-weight: bold;

list-style: none;

overflow: auto;

}

.top-nav li {

float: left;

}

.top-nav li ul {

display: none;

list-style: none;

padding: 0px;

position: relative;

}

.top-nav li a:hover {

background-color: red;

}

.top-nav li:hover ul {

display: block;

width: 80px;

}

.top-nav li:hover ul li ul {

display: none;

}

.top-nav li ul li:hover ul {

display: block;

top: 0px;

left: 80px;

position: absolute;

}

.top-nav li a {

line-height: 20px;

text-decoration: none;

background: #DDDDDD;

color: #666666;

display: block;

width: 80px;

text-align: center;

}

</style>

</head>

<body>

<div id="top">

<ul class="top-nav">

<li><a href="#">首页</a></li>

<li><a href="#">课程大厅</a></li>

<li><a href="#">学习中心</a>

<ul>

<li><a href="#">前端课程</a>

<ul>

<li><a href="#">JavaScript</a></li>

<li><a href="#">jQuery</a></li>

<li><a href="#">Angular</a></li>

</ul>

</li>

<li><a href="#">后端课程</a></li>

<li><a href="#">移动开发</a></li>

</ul>

</li>

<li><a href="#">经典案例</a></li>

<li><a href="#">关于我们</a></li>

</ul>

</div>

</body>

</html>