css+div纵向导航菜单及⼆级弹出菜单
功能介绍，当⿏标放在⼀级菜单那⾥时，弹出⼆级菜单。结尾有效果图。
本功能重点1（⼆级菜单的位置）：
⾸先需要⼀级菜单的li⾥写position: relative；做⼀个相对定位⼆级菜单。
然后，在⼆级菜单⾥⾯写position: absolute；此时⼆级菜单的盒⼦的位置是与⼀级菜单重叠。所以，要做⼀个绝对定位，并设置其左边距为26px（⼀级菜单的宽度为26px）
本功能重点2（⼆级菜单显⽰）：
⾸先，默认情况将不显⽰⼆级菜单，display:none;
#menu ul li:hover ul{
display: block;
}
重点在于这⼀句，当⿏标放在li上的时间，⼆级菜单ul显⽰。是包裹在li当中的ul显⽰出来 ，当中ul li中的结构也有起到作⽤。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>⼆级纵向菜单</title>
<style type="text/css">
a:hover{
color: red;
}
a{
color: black;
text-decoration: none;
}
#menu{
width: 100px;
border: 1px solid grey;
border-bottom: none;
}
#menu ul{
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li{
border-bottom: 1px solid grey;
background-color: #74B8FF;
padding: 0px 8px;
height: 26px;
line-height: 26px;
position: relative;
}
#menu ul li ul{
position: absolute;
display: none;
width: 100px;
left: 100px;
top: 0px;
}
a:hover{
color: red;
}
#menu ul li:hover ul{
display: block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">⾸页</a></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>
</ul>
</li>
<li><a href="#">赛事介绍</a>
<ul>
<li><a href="#">赛事111</a></li>
<li><a href="#">特⾊222</a></li>
<li><a href="#">精彩333</a></li>
</ul>
<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>
</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>
</ul>
</li>
</ul>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。