html 菜单编写

最新推荐文章于 2023-07-16 22:27:33 发布

himici

最新推荐文章于 2023-07-16 22:27:33 发布

阅读量732

点赞数

分类专栏： HTML5 文章标签： html

本文链接：https://blog.csdn.net/u012184853/article/details/52248938

版权

HTML5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu1</title>
    <style>
        .menubtn{
            background-color: red;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor:pointer;
        }
        .menudown{
            position: relative;
            display: inline-block;
        }
        .menudown-content{
            display: none;   // none：隐藏对象
            position: absolute;
            right: 0;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .menudown-content a{
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;  //指定对象为块元素
        }
        .menudown-content a:hover{
            background-color: #f1f1f1;
        }
        .menudown:hover .menudown-content{
            display: block;
        }
        .menudown:hover .menubtn{
            background-color: #3e8e41;
        }
    </style>
</head>
<body>

<div class="menudown">
    <button class="menubtn">menu</button>
    <div class="menudown-content" style="left:0;">
        <a href="#">menu one</a>
        <a href="#">menu two</a>
        <a href="#">menu three</a>
    </div>
</div>
</body>
</html>

这里写图片描述

himici

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 菜单编写

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>menu1</title> <style> .menubtn{ background-color: red; color: white; paddin
复制链接

扫一扫

专栏目录