实现悬浮的小

1.基础的html页面结构

<div class='center'>
        <ul>
            <li>
                <a href="">导航1</a>
            </li>
            
            <li>
                <a href="">导航2</a>
            </li>

            <li>
                <a href="">导航3</a>
            </li>

            <li>
                <a href="">导航4</a>
            </li>

            <li>
                <a href="">导航5</a>
            </li>
    </ul>
</div>

2.css样式

 * {
        margin: 0;
        padding: 0;
    }

    .center {
        margin: 0 auto;
        width: 800px;
        height: 50px;
        background-color: #f4e6cf;
    }

    .center ul li {
        position: relative;
        float: left;
        width: 140px;
        margin-left: 20px;
        list-style: none;
        line-height: 50px;
    }

    .center>ul>li a {
        color: white;
        font-size: 20px;
        text-decoration: none;
    }

效果

3.添加菜单

在导航1中添加

`

<div class='center'>
        <ul>
            <li>
                <a href="">导航1</a>
                <!-- 菜单 -->
                <div class="menu">
                <ul>
                    <li><a href="">选项1</a></li>
                    <li><a href="">选项2</a></li>
                    <li><a href="">选项3</a></li>
                </ul>
            </div>
            </li>
            
            <li>
                <a href="">导航2</a>
            </li>

            <li>
                <a href="">导航3</a>
            </li>

            <li>
                <a href="">导航4</a>
            </li>

            <li>
                <a href="">导航5</a>
            </li>
    </ul>
</div>`

4.菜单的样式

menu设置成绝对定位，脱离标准的文档流，不会影响别的元素。默认是隐藏的。

.center>ul>li .menu {
        position: absolute;
        width: 100px;
        top: 35px;
        background-color: white;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
        display: none;
    }

    .center .menu>ul>li {
        height: 40px;
        line-height: 40px;
    }

    .center .menu>ul>li a {
        font-size: 12px;
        color: black;
    } 
    .center .menu>ul>li a:hover {
        color: rgb(230, 230, 55);
    }

    .center ul li:hover .menu {
        display: block;
    }

菜单的效果