html简单下拉二级菜单

君临天下101

已于 2022-02-26 15:52:47 修改

阅读量7.5k

点赞数 1

分类专栏： Java 文章标签： HTML CSS 二级菜单悬停响应样式定位

于 2021-06-21 14:28:54 首次发布

本文链接：https://blog.csdn.net/r_omantic_man/article/details/118083150

版权

Java 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

在实际网页中经常能看到二级菜单的使用，如下图所示，
鼠标移动到相应位置菜单栏才会有响应
在这里插入图片描述
具体实现代码如下（仅供参考）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉二级菜单</title>

    <!--这是一段注释-->
    <style type="text/css">
		/*初始化边界*/
        *{
            margin: 0;
            padding: 0;
        }
        
        body{
            padding-top: 50px;
            font-size: 15px;
        }
        li{
            /*list-style设定为none可以去除列表前的小圆点*/
            list-style: none;
            color: white;
        }

        div{
            text-align: center;
            color: white;
        }

        .father{
            display: inline-block;
            /*relative生成相对定位的元素，相对于其正常位置进行定位。*/
            position: relative;
            /*上下边距为10px，左右边距为50px*/
            padding: 10px 50px;
            background-color: #6495ed;
            /*将方框的角变为圆角框*/
            border-radius: 5px;
        }

        .son{
            position: absolute;
            display: none;
            background-color: #5469c6;
            top: 25px;
            left: 10px;
            right: 10px;
            padding-left: 0px;
        }

        .son>li{
            padding: 5px;
        }

        /*hover是指当鼠标移动到上面是才有响应*/
        .father:hover{
            background-color: #4d7afa;
        }

        .son li:hover
        {
            background-color: cornflowerblue;
        }

        .father:hover .son{
            display: block;
        }

        .link1{
            color: white;
            text-decoration: none;
        }

    </style>
</head>
<body>
    <div>
        <a class="link1" href="http://www.baidu.com"><li class="father">一级菜单</a>
                <ul class="son">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>

            <li class="father">一级菜单
                <ul class="son">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>

            <li class="father">一级菜单
                <ul class="son">
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                    <li>二级菜单</li>
                </ul>
            </li>
    </div>
</body>
</html>