核心提示：二级导航!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN https://www.w3.org/TR/xhtml1/DTD/xht...
二级导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横排二级下拉菜单</title>
<style type="text/css">
* { margin:0; padding:0;}
ul, li { list-style:none;}
a { text-decoration:none;}
.nav {border-right:none; overflow:hidden;
float:left;
width: 345px;
height: 80px;
color:#333333;
border: 1px solid red;
}
.nav ul li {
float:left;
}
.nav ul li a {
width: 115px;
height: 80px;
text-align: left;
line-height: 80px;
color: #333333;
font-size: 16px;
list-style-type: none;
cursor: default;
display: block;
}
.nav ul li a:hover {
color: #367AD8;
}
.nav ul li ul {
position: absolute;
display: none;
}
.nav ul li ul li {
clear: both;
}
.nav ul li ul li a {
width: 95px;
height: 30px;
font-size: 12px;
text-align: left;
line-height: 30px;
border-right: none;
background: white;
border: 1px solid red;
}
.nav ul li:hover ul {
display: block;
}
</style>
</head>
<body>
<p class="nav">
<ul>
<li><a href="#">产品介绍</a>
<ul>
<li><a href="#">杀毒防护</a></li>
<li><a href="#">电脑加速</a></li>
<li><a href="#">游戏加速</a></li>
<li><a href="#">等级加速</a></li>
<li><a href="#">账号保护</a></li>
<li><a href="#">手游助手</a></li>
</ul>
</li>
<li><a href="#">活动中心</a>
<ul>
<li><a href="#">兑换礼包</a></li>
<li><a href="#">赚安全金币</a></li>
<li><a href="#">专题活动</a></li>
</ul>
</li>
<li><a href="#">在线安全</a>
<ul>
<li><a href="#">电脑诊所</a></li>
<li><a href="#">申诉举报</a></li>
<li><a href="#">诈骗信息查询</a></li>
<li><a href="#">网站安全检测</a></li>
<li><a href="#">密码安全检测</a></li>
<li><a href="#">联合实验室</a></li>
</ul>
</li>
</ul>
</p>
</body>
</html>
