CSS中hover出現二級菜單

在絕大多數中,都會用到二級菜單實現的效果也各有不同,有的是用js實現的,也有用css實現的,我之前做了個比較簡單的二級菜單,效果如下圖所示:

首先由於元素比較少,我就把全部的外邊距和內填充設置為了.

一級菜單浮動到左邊使得水平排列,同時對一級菜單進行相對定位,二級菜單設置絕對定位,絕對定位是相對其父元素的.

下面看一下具體的代碼:

HTML:

<div>
    <ul class="first">
        <li class="menu">我是一級菜單
            <ul class="second">
                <li>我是二級菜單</li>
                <li>我是二級菜單</li>
                <li>我是二級菜單</li>
            </ul>
        </li>
        <li>我是一級菜單</li>
        <li>我是一級菜單</li>
        <li>我是一級菜單</li>
        <li>我是一級菜單</li>
    </ul>
</div>

 

下面是css的樣式:

<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    div{
        margin:8px;
    }
    li{
        list-style: none;
        cursor: pointer;
    }
    .first{
        position: relative;
    }
    .first>li{
        float: left;
        display: block;
        background-color: skyblue;
        margin-right: 8px;
        padding: 8px;
        }
    .first>li:hover{
        background-color: cyan;
    }
    .second{
        position: absolute;
        left: 0px;
        margin-top: 8px;
        display: none;
    }
    .second>li{
        display: block;
        background-color: skyblue;
        padding: 8px;
    }
    .menu:hover .second{
        display: block;
        background-color: cyan;
    }
    .second>li:hover{
        background-color: cyan;
    }
</style>

這只是一種比較簡單的二級菜單的實現方法,如果有可以優化的地方,歡迎評論.