纯CSS实现一,二级菜单

一直以来,像网站的一二级菜单都是通过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 ,欢迎大家传播与分享.