CSS鼠标悬停下拉菜单演示

zhaokaiwen_kevin

于 2019-12-02 18:17:02 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhaokaiwen_kevin/article/details/103354041

本文通过实例代码介绍了使用纯CSS如何创建鼠标悬停时显示的下拉菜单，详细讲解了CSS选择器和过渡效果的应用，帮助开发者掌握这一常见的网页交互设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>悬停下拉菜单演示</title>
    <style type="text/css">
        a {
            text-decoration: none;
            color: black;
        }
 
        .nav {
            background-color: steelblue;
            height: 40px;
            width: 80%;
            border: 1px solid #f0ad4e;
            border-radius: 5px;
            margin: 0 auto;
            padding-top: 1px;
            padding-bottom: 3px;
            box-shadow: 1px 1px 0 0 gray;
        }
 
        .dropdown {
            list-style: none;
            float: left;
            margin-right: 5px;
            display: block;
            width: 80px;
        }
 
        .dropdown:hover {
            background-color: white;
            border-radius: 5px 5px 0 0;
            padding-top: 5px;
        }
 
        .menubar {
            color: white;
        }
 
        .dropdown:hover .menubar{