超级实用的下拉导航项目，可以设计下拉更多按钮

最新推荐文章于 2024-08-24 09:00:00 发布

hai7425

最新推荐文章于 2024-08-24 09:00:00 发布

阅读量115

点赞数

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

本文链接：https://blog.csdn.net/hai7425/article/details/126323939

版权

CSS笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

        <style>
            .navbar {
                overflow: hidden;
                background-color: black;
            }
 
            .navbar a {
                float: left;
                font-size: 16px;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
 
            .dropdown {
                float: left;
                overflow: hidden;
            }
 
 
            .dropdown .btn {
                font-size: 16px;
                border: none;
                outline: none;
                color: white;
                padding: 14px 16px;
                background-color: inherit;
                font-family: inherit;
                margin: 0;
            }
 
            .navbar a:hover, .dropdown:hover .btn {
                background-color: gray;
            }
 
            .dropdown-menu {
                display: none;
                position: absolute;
                background-color: #f9f9f9;
                min-width: 160px;
                box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                z-index: 1;
 
            }
 
            .dropdown-menu a {
                float: none;
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }
 
            .dropdown-menu a:hover {
                background-color: #ddd;
            }
 
            .dropdown:hover .dropdown-menu {
                display: block;
            }
        </style>
    </head>
    <body>
        <h2> Dropdown in navbar </h2>
        <div class="navbar">
            <a href="#home">Home</a>
            <a href="#news">News</a>
            <div class="dropdown">
                <button class="btn">Dropdown</button>
                <div class="dropdown-menu">
                    <a href="#">courses</a>
                    <a href="#">Menu</a>
                    <a href="#">Link </a>
                </div>
            </div>
        </div>
 
    </body>
</html>