<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">* {padding: 0;margin: 0;}ul{/*导航栏整体居中*/list-style: none;width: 500px;margin: 0 auto;}.frist:after {/*清除浮动*/content: "";clear: both;display: block;}li {float: left;margin-left: 20px;width: 50px;text-align:center;}a{display:block;width: 50px;background: #6F6;text-decoration: none;}.second li{margin:0;clear:both;}.second li a:hover{background:#FF6;}.second{/*二级目录隐藏*/display:none;position:fixed;/*保护页面元素布局*/}.frist>li:hover .second{ /*在指向li标签时 ul标签属性变化*/display:block;}</style></head><body><nav><ul class="frist"><li> <a href="#">英语</a><ul class="second"><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 class="second"><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 class="second"><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 class="second"><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 class="second"><li ><a href="#">练习一</a></li><li ><a href="#">练习一</a></li><li ><a href="#">练习一</a></li><li ><a href="#">练习一</a></li></ul></li></ul></nav><div style="background:red; height:20px;"></div></body>
