纯CSS实现一,二级菜单_html/css

来源：学路情感网

一直以来,像网站的一二级菜单都是通过JS来实现菜单的显示与隐藏.虽然实现的代码也不是那么难,但毕竟还是多出了一些时间来编写. 其实CSS是可以实现这种效果的.

我们今天就来看看这个效果的实现.HTML结构代码,跟往常的一样.菜单是如何显示的就该怎么编写.

  首页
  编程   Java 
  C/C++ 
  Golang 
 
 
  前端   HTML 
  CSS 
  Javascript

然后,重点来了.现在结构出来了,那怎么控制二级菜单呢? 其实还是使用元素的伪类: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 ,欢迎大家传播与分享.

显示全文

全部频道

纯CSS实现一,二级菜单_html/css