Web程序设计二级下拉菜单页面怎么做

 我来答

2个回答

#热议# 为什么有人显老，有人显年轻？

联雅网络
2017-06-23 · 百度认证:深圳联雅网络科技有限公司

联雅网络

联雅网络成立于2005年，是一家技术开发型的网络公司，致力于高端品牌网站建设，微信公众平台开发，是一支拥有一百多人的网站设计技术团队。分深圳联雅网络与广州联雅网络，一直专注网站建设领域

向TA提问

关注

展开全部

Web程序设计二级下拉菜单页面做法：
以纯CSS为例：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{
margin:0px;
padding:0px;
}
#menu
{

width:500px;
height:38px;
margin:5px auto;

}
#menu ul
{
height:38px;
list-style:none;
margin:0;
padding:0;
}
#menu li
{
float:left;

}
#menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:38px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#menu li a:hover{
color:#000000;
text-decoration:none;
}

#menu li ul{
background: #ECE9E9;
border:1px solid #D8D8D8;
display:none;
height:auto;
position:relative;
left:20px;
width:100px;
z-index:200;
}
#menu li ul li
{
margin-left:0px;
height:38px;

}

#menu li:hover ul{
display:block;
}
#menu li li {
display:block;
float:none;
width:100px;
}
#menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#menu li ul a:hover{
background:#555;
color:#fff;

}

</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">无下拉状态</a></li>
<li><a href="#">有下拉状态</a>
<ul>
<li><a href="#">选项1</a></li>
<li><a href="#">选项2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>