科技资讯

Document

HTML实现三级菜单代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>L12114038张璐</title>
<style type="text/css">
#menu {
width: 726px;
height: 26px;
margin: 0px auto;
border: 1px solid #999;
}
#menu ul {
margin: 0px;
padding: 0px;
list-style: none; /*隐藏默认列表符号*/
}
#menu ul li {
background: #06C;
height: 26px;
line-height: 26px; /*行距*/
text-align: center;
border-right: 1px solid #999;
position: relative;
width: 120px;
float: left;
}
a {
display: block;
font-size: 13px;
color: #FFF;
text-decoration: none; /*隐藏超链接默认下划线*/
}
a:hover {
display: block;
color: #F00;
font-size: 14px;
}
#menu ul li ul {
display: none; /*默认隐藏*/
top: 26px;
width: 100px;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
left: 0px;
}
#menu ul li ul li ul{
display: none; /*默认隐藏*/
top: 0px;
width: 100px;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
left: 120px; /*由第27行可得*/
}
#menu ul li:hover ul {
display: block;
}
#menu ul li:hover ul li a{
display: block;
}
#menu ul li:hover ul li ul{
display: none;
}
#menu ul li ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Selector</a>
<ul>
<li><a href="#">标记选择器</a></li>
<li><a href="#">类选择器</a></li>
<li><a href="#">id选择器</a></li>
<li><a href="#">复合选择器</a></li>
</ul>
</li>
<li><a href="#">Use CSS File in HTML</a></li>
<li><a href="#">Formatting Document</a></li>
<li><a href="#">Layout</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Ajax</a></li>
</ul>
</div>
</body>
</html>