<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>HTML+CSS 二级导航</title><style type="text/css">{ margin: 0; padding: 0;}ul,ol{ list-style: none;}a{ color: #000; display: block; width: 140px; height: 40px; text-align: center; line-height: 40px; text-decoration: none;}/ /.nav{ width: 100%; height: 40px; background-color: skyblue;}.nav>ul{ width: 1200px; height: 40px; margin: 0 auto; / 这个背景色是方便大家伙看的 / / background-color: red; /}.nav>ul>li{ float: left; width: 140px; height: 40px; /让ol(二级导航根据他进行定位 以是li进行相对定位)/ position: relative;}.nav>ul>li>ol{ background-color: skyblue; position: absolute; left: 0; top: 40px; display: none;/初始值隐蔽/}/ 悬浮的效果 /a:hover{ color: #fff; background-color: deepskyblue;}.nav>ul>li:hover>a{ color: #fff; background-color: deepskyblue;}.nav>ul>li:hover>ol{ display: block;}</style></head><body><div class="nav"><ul><li><a href="">首页</a></li><li><a href="">法师</a><ol><li><a href="">妲己</a></li><li><a href="">甄姬</a></li><li><a href="">安琪拉</a></li><li><a href="">张良</a></li></ol></li><li><a href="">战士</a></li><li><a href="">刺客</a><ol><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><li><a href="">赵云</a></li><li><a href="">许诸</a></li></ol></li><li><a href="">射手</a></li><li><a href="">坦克</a></li><li><a href="">赞助</a><ol><li><a href="">蔡文姬</a></li><li><a href="">鬼谷子</a></li><li><a href="">庄周</a></li></ol></li></ul></div><p>HTML+CSS 二级导航</p></body></html>
