CSS实现鼠标悬停出现下拉菜单及二级菜单

CSS实现鼠标悬停出现子菜单及二级子菜单

非早起选手

8261人浏览 · 2021-11-14 09:13:53

非早起选手 · 2021-11-14 09:13:53 发布

浏览器效果：

思路：利用盒子的溢出（overflow）属性实现，盒子高度和宽度固定，溢出部分隐藏起来，当鼠标悬停在父菜单上则利用伪类选择器:hover设置盒子溢出属性为可见，并且将子菜单的层级设为最高，以免页面发生冲突。

代码如下：

<style>

    #box1{

        width: 240px;

        margin: auto;

        margin-top: 100px;

        display: flex;

        flex-direction: row;

    }

    #b1,#b2,#b3{

        width: 80px;

        height: 35px;

        border: 1px solid lightgrey;

        background-color: lightpink;

        line-height: 35px;

        text-align: center;

        position: relative;

        overflow: hidden;

    }


    .son1{

        border: 1px solid lightgrey;

        background-color: lightpink;

        text-align: center;

        width: 80px;

        height: 35px;

        line-height: 35px;

        overflow: hidden;

    }

    .son2{

        border: 1px solid lightgrey;

        background-color: rgb(247, 159, 127);

        text-align: center;

        width: 80px;

        height: 35px;

        line-height: 35px;

        position: relative;

        top: -36px;

        left: 80px;

    }

    #b1:hover,#b2:hover,#b3:hover{

        overflow: visible;

        background-color: mediumturquoise;

        color: white;

        z-index: 999;

        cursor: pointer;

    }

    .son1:hover,.son2:hover{

        background-color: mediumturquoise;

        cursor: pointer;

    }

    #b1-1:hover{

        overflow: visible;

        background-color: mediumturquoise;

        z-index: 999;

        cursor: pointer;

    }

</style>

<body>

    <div id="box1">

        <div id="b1">

            菜单1

            <div id="b1-0">

                <div id="b1-1" class="son1">

                    子菜单1

                    <div>

                        <div id="b1-1-1" class="son2">子菜单1-1</div>

                        <div id="b1-1-1" class="son2">子菜单1-2</div>

                    </div>

                </div>

                <div id="b1-2" class="son1">子菜单2</div>

                <div id="b1-3" class="son1">子菜单3</div>

            </div>

        </div>

        <div id="b2">

            菜单2

            <div id="b2-0">

                <div id="b2-1" class="son1">

                    子菜单1

                    <div>

                        <div id="b2-1-1" class="son2">子菜单2-1</div>

                        <div id="b2-1-1" class="son2">子菜单2-2</div>

                    </div>

                </div>

                <div id="b2-2" class="son1">子菜单2</div>

                <div id="b2-3" class="son1">子菜单3</div>

            </div>

        </div>

        <div id="b3">

            菜单3

            <div id="b3-0">

                <div id="b3-1" class="son1">

                    子菜单1

                    <div>

                        <div id="b3-1-1" class="son2">子菜单1-1</div>

                        <div id="b3-1-1" class="son2">子菜单1-2</div>

                    </div>

                </div>

                <div id="b3-2" class="son1">子菜单2</div>

                <div id="b3-3" class="son1">子菜单3</div>

            </div>

        </div>

    </div>

</body>

注意：想要实现超链接，只需要在各级菜单加超链接，将超链接设置成块（block），宽和高设置为该盒子的宽和高即可。

关键点在于父菜单与子菜单的关系，某一选择器的伪类选择器:hover只能对其子选择器或者后面的兄弟选择器起作用。