<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*一二级菜单横向排列*/
ul li{
float: left
}
/*二级菜单默认不显示*/
ul li ul{
display: none
}
/*一级菜单获得焦点时显示其二级菜单*/
ul li:hover ul{
display: block
position: absolute
padding-left: 0px
}
/*不显示列表样式*/
li{
list-style: none
}
/*二级菜单纵向显示*/
/*
ul li ul li{
float: none
}
*/
</style>
</head>
<body>
<div>
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html><html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title></title>
<style>
.menu
{
position: relative
width: 150px
height: 100px
background-color: #ccccff
text-align: center
font-size: 20px
color: #3366dd
line-height: 150px
}
.menu:hover .submenu
{
display: block
}
.submenu
{
position:absolute
display: none
box-shadow: 1px 1px .2em #666
width: 300px
left: 180px
top: 0
}
.submenu div
{
text-align: center
height: 50px
line-height: 50px
background-color: #eeeeff
}
.submenu div a
{
font-size: 20px
color: #666666
font-family: "microsoft yahei"
text-decoration: none
}
</style>
</head>
<body>
<div class="menu">
<span>申报活动</span>
<div class="submenu">
<div><a href="#">申报社会实践活动</a></div>
<div><a href="#">申报志愿服务活动</a></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）