CSS鼠标悬停下拉菜单演示

最新推荐文章于 2024-08-14 13:53:45 发布

原创

最新推荐文章于 2024-08-14 13:53:45 发布 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

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


<!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{