下拉二级菜单的两种实现方式（html+css）

最新推荐文章于 2024-08-12 16:19:20 发布

sparrow_girl

最新推荐文章于 2024-08-12 16:19:20 发布

阅读量787

点赞数

分类专栏： HTML+CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/qq_51053759/article/details/119958758

版权

本文介绍了两种使用HTML和CSS创建下拉二级菜单的方法。第一种方法详细阐述了如何利用CSS的伪类和定位来实现。第二种方法则探讨了HTML5的新特性在构建下拉菜单中的应用，包括如何利用`

摘要由CSDN通过智能技术生成

方式一：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,p,ul,li{margin:0; padding:0; list-style:none;}

        #menu{
            background:#36f;
            height:40px;
        }

        #menu li{
            float:left;
            width:120px;
            line-height:40px;
            text-align:center;
        }

        #menu a{
            color:#fff;
            text-decoration:none;
            display:block;
        }
        #menu a:hover{
            background:#f00;
        }

        #menu div{
            background:rgba(0,0,0,0.8);
            position:absolute;
            width:120px;
            display:none;
        }

        /* 实现下拉菜单效果，就一句话：移动到li上，让子元素div显示 */
        #menu li:hover div{
            display:block;
        }
    </style>
</head>

<body>
    <ul id="menu">
        <li>
            <a href="#">网站首页</a>
        </li>
        <li>
            <a href="#">公司简介</a>
            <div>
                <

最低0.47元/天解锁文章

sparrow_girl

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
下拉二级菜单的两种实现方式（html+css）

方式一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
复制链接

扫一扫

专栏目录