HTML+CSS荔枝网邮箱下拉菜单尝试_html设置邮箱下拉列表框-CSDN博客

本文链接：https://blog.csdn.net/qq_47804149/article/details/126640037

HTML部分：

<div class="down">
        <div class="nav"><a href="#" class="email">邮箱</a></div>
        <div class="down-content">
            <a href="#" class="feicheng">非诚男嘉宾邮箱</a>
            <a href="#" class="feicheng">VIP邮箱</a>
            <a href="#" class="feicheng">JSTV邮箱</a>
        </div>
    </div>

思路是盒子套盒子：

CSS部分：

 .nav {
            height: 48;
            background-color: #000;
        }
.email {
            display: block;
            width: 28px;
            height: 18px;
            background-color: #000;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            padding: 15px 33px;
        }

效果1：

.down-content a {
            color: #000;
            background-color: #fff;
            text-decoration: none;
            font-size: 14px;
            padding-left: 20px;
            height: 16px;
            width: 124px;
            padding: 12px;
        }

效果2：

先让下拉菜单隐藏：

.down-content {
            display: none;
        }

        .down:hover .down-content {
            display: block;
        }
        .down:hover .down-content a {
            display: block;
            box-shadow: 2px 2px 2px #c4c4c4;
        }

在鼠标经过down盒子，即整个盒子时让下拉菜单，即down-content盒子显示↑

细节调整↓

         .email:hover,
        .down:hover .email {
            background-color: red;
        }
        .down-content a:hover {
            color: red;
            background-color: #f4f4f4;
        }

总代码：

<!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>
        .nav {
            height: 48;
            background-color: #000;
        }

        .email {
            display: block;
            width: 28px;
            height: 18px;
            background-color: #000;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            padding: 15px 33px;
        }

        .down-content a {
            color: #000;
            background-color: #fff;
            text-decoration: none;
            font-size: 14px;
            padding-left: 20px;
            height: 16px;
            width: 124px;
            padding: 12px;
        }

        .down-content {
            display: none;
        }

        .down:hover .down-content {
            display: block;
        }

        .down:hover .down-content a {
            display: block;
            box-shadow: 2px 2px 2px #c4c4c4;
        }

        .email:hover,
        .down:hover .email {
            background-color: red;
        }

        .down-content a:hover {
            color: red;
            background-color: #f4f4f4;
        }
    </style>
</head>

<body>
    <div class="down">
        <div class="nav"><a href="#" class="email">邮箱</a></div>
        <div class="down-content">
            <a href="#" class="feicheng">非诚男嘉宾邮箱</a>
            <a href="#" class="feicheng">VIP邮箱</a>
            <a href="#" class="feicheng">JSTV邮箱</a>
        </div>
    </div>
</body>

</html>