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>

这只是一种比较简单的二级菜单的实现方法,如果有可以优化的地方,欢迎评论.