CSS下拉菜单

最新推荐文章于 2024-07-25 08:14:42 发布

Aoaoaobbh

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量950

点赞数 1

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_60835328/article/details/125135192

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

下拉菜单

例如：

将鼠标移至下拉菜单按钮的时候，会出现下拉框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*子绝父相*/
        .dropdown {
            position: relative;
            display: inline-block;
        }
        .droptn {
            background-color: #4CAF50;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            color: #fff;
        }
        /*display: none;为了将类droptn-content隐藏起来*/
        .droptn-content {
            position: absolute;
            display: none;
            min-width: 160px;
            background-color: #fff;
            box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, .3);
            z-index: 1;
        }
        /*下拉链接*/
        .droptn-content a {
            display: block;
            text-decoration: none;
            color: #000;
            padding: 12px 16px;
        }
        /*悬停时更改下拉链接的颜色*/
        .droptn-content a:hover {
            background-color: #ddd;
        }
        /*悬停时显示下拉菜单*/
        .dropdown:hover .droptn-content {
            display: block;
        }
        /*显示下拉内容的时候更改下拉按钮的颜色*/
        .droptn:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button class="droptn">下拉菜单</button>
        <div class="droptn-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
    </div>
</body>
</html>

.dropdown 类使用 position:relative，当希望将下拉内容放置在下拉按钮的正下方,使用 position:absolute时，需要使用该类。

.dropdown-content 类保存实际的下拉菜单内容。默认情况下它是隐藏的，并将在悬停时显示。min-width 设置为 160px。可随时更改此设置。

提示：如果希望下拉内容的宽度与下拉按钮的宽度一样，可以将宽度设置为 100％（设置 overflow:auto 可实现在小屏幕上滚动）

注意：将下拉框的z-index属性设置为1，是为了让下拉框在底下的内容上方显示，position：absolute；是为了不影响下方内容的显示.

下拉式图像

在下拉框中添加图像或者其他内容：

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .dropdown {
            position: relative;
        }
        .dropdown>img {
            width: 100px;
        }
        .dropdown .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            z-index: 1;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,.2);
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .desc {
            padding: 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <img src="./images/coffee.jpg" alt="">
        <div class="dropdown-content">
            <img src="./images/coffee.jpg" alt="">
            <div class="desc">coffee</div>
        </div>
    </div>
</body>
</html>

下拉导航

在导航栏中添加下拉菜单:

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉式菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        ul {
            background-color: #333;
            overflow: hidden;
        }
        ul li {
            float: left;
        }
        li a,.droptn {
            display: inline-block;
            padding: 14px 16px;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        li a:hover,.dropdown:hover .droptn {
            background-color: red;
        }
        .drd {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .drd a {
            display: block;
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            text-align: left;
        }
        .drd a:hover {
            background-color: #f1f1f1;
        }
        .dropdown:hover .drd {
            display: block;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="###">Home</a></li>
        <li><a href="###">News</a></li>
        <li class="dropdown">
            <a href="###" class="droptn">Dropdown</a>
            <div class="drd">
                <a href="###">Link1</a>
                <a href="###">Link2</a>
                <a href="###">Link3</a>
            </div>
        </li>
    </ul>
</body>
</html>