【乔二参】CSS 下拉菜单示例

最新推荐文章于 2025-06-12 14:33:44 发布

原创最新推荐文章于 2025-06-12 14:33:44 发布

· 373 阅读

7 ·

版权

文章标签：

#css #前端

CSS 专栏收录该内容

31 篇文章

订阅专栏

https://gitee.com/qercan/software-sharing

非常感谢您的支持！您的点赞、关注和评论是我创作的动力。我会继续努力，提供高质量内容，如有任何建议，请随时与我联系。

以下是一个简单的HTML和CSS示例，用于创建一个基本的CSS下拉菜单。

HTML 部分

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 下拉菜单示例</title>
    <link rel="stylesheet" href="styles.css"> <!-- 引入CSS样式文件 -->
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li>
                <a href="#">关于我们</a>
                <ul>
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">团队成员</a></li>
                    <li><a href="#">联系信息</a></li>
                </ul>
            </li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>
</body>
</html>

CSS 部分 (styles.css)

/* 样式文件：styles.css */

/* 清除默认的列表样式 */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* 设置导航栏的样式 */
nav ul li {
    position: relative;
    display: inline-block;
    margin-right: 10px;
}

/* 设置链接的样式 */
nav ul li a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
}

/* 设置鼠标悬停时的链接样式 */
nav ul li a:hover {
    background-color: #eee;
}

/* 隐藏下拉菜单（默认状态） */
nav ul li ul {
    display: none;
    position: absolute;
    top: 100%; /* 设置下拉菜单的顶部位置为其父元素的底部 */
}

/* 当用户点击下拉菜单的父元素时，显示下拉菜单 */
nav ul li:hover > ul {
    display: block;
}

/* 设置下拉菜单的样式 */
nav ul li ul li {
    display: block;
    width: 100%;
    margin: 0;
}

/* 设置下拉菜单链接的样式 */
nav ul li ul li a {
    padding: 10px 20px;
}

/* 设置下拉菜单链接悬停时的样式 */
nav ul li ul li a:hover {
    background-color: #ddd;
}

解释

HTML部分：
- 使用<nav>标签包裹导航栏。
- 使用<ul>和<li>标签创建无序列表，表示导航菜单项。
- 在需要显示下拉菜单的<li>标签内部再嵌套一个<ul>，表示下拉菜单的内容。
CSS部分：
- 首先清除默认的列表样式。
- 设置导航栏的基本样式，包括列表项的位置、显示方式和间距。
- 设置链接的样式，包括内边距、颜色和文本装饰。
- 使用:hover选择器来定义鼠标悬停在链接上时的样式。
- 隐藏下拉菜单（默认状态），并使用position: absolute;将其定位到其父元素的下方。
- 使用:hover > ul选择器来在用户点击或悬停在带有下拉菜单的父元素上时显示下拉菜单。
- 设置下拉菜单的基本样式，包括列表项的显示方式、宽度和间距。
- 设置下拉菜单链接的样式，包括内边距。
- 使用:hover选择器来定义鼠标悬停在下拉菜单链接上时的样式。