转载

纯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;         }

最后的效果:

纯CSS实现一,二级菜单