前言：
此时各位老铁们对“html侧导航”都比较关切，各位老铁们都想要分析一些“html侧导航”的相关知识。那么小编也在网络上搜集了一些对于“html侧导航””的相关知识，希望小伙伴们能喜欢，同学们一起来了解一下吧！<!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> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html侧导航
