纯CSS实现一,二级菜单_html/css_WEB-ITnose-html教程-PHP中文网

纯CSS实现一,二级菜单_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:58:05

原创

1345人浏览过

一直以来,像网站的一二级菜单都是通过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;        }

登录后复制

最后的效果: