功能介绍，当鼠标放在一级菜单那里时，弹出二级菜单。结尾有效果图。
本功能重点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>
