純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></pre> 
 
然后,重點來了.現在結構出來了,那怎么控制二級菜單呢? 其實還是使用元素的偽類: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;
        }</pre> 
 
最后的效果:

  
 本文屬于吳統威的博客, 微信公眾號:bianchengderen,QQ群:186659233 的原創文章,轉載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=197 ,歡迎大家傳播與分享. 
 </div>