一直以来,像网站的一二级菜单都是通过JS来实现菜单的显示与隐藏.虽然实现的代码也不是那么难,但毕竟还是多出了一些时间来编写. 其实CSS是可以实现这种效果的.
我们今天就来看看这个效果的实现.HTML结构代码,跟往常的一样.菜单是如何显示的就该怎么编写.
<ul> <li> <a href="#">首页</a></li> <li> <a href="#"> 编程 </a> <ol> <li> <a href="#">Java</a> </li> <li> <a href="#">C/C++</a> </li> <li> <a href="#">Golang</a> </li> </ol> </li> <li> <a href="#"> 前端 </a> <ol> <li> <a href="#">HTML</a> </li> <li> <a href="#">CSS</a> </li> <li> <a href="#">Javascript</a> </li> </ol> </li></ul>
然后,重点来了.现在结构出来了,那怎么控制二级菜单呢? 其实还是使用元素的伪类:hover 我们给UL的第一级子元素LI一个:hover,这时候来通过伪类来控制li下的子节点的ol的display:block. 如果需要设置子菜单的位置.那就通过给OL设置position来控制其位置.这个就不多讲了. CSS代码
a { color: black; text-decoration: none; } a:hover{ color: #fff; } ul,li,ol{ list-style: none; padding: 0; margin: 0; } ol, li{ display: inline-block; } ul{ background-color: #44b549; padding: 5px 10px; border-radius: 5px; } ul > li { position: relative; margin-left: 15px; } ul > a{ display: block; } ul > li > a:hover,ul > li:hover > a{ background-color: #eee; color: #44b549; } ul > li > ol { display: none; position: absolute; width: 300px; background-color: #44b549; font-size: 12px; line-height: 22px; padding: 5px; border-radius: 5px; } ul > li:hover ol{ display: block; }最后的效果:
本文属于吴统威的博客, 微信公众号:bianchengderen,QQ群:186659233 的原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=197 ,欢迎大家传播与分享.
