HTML5向下拉框

最新推荐文章于 2024-05-09 21:24:37 发布

道墨思冥

最新推荐文章于 2024-05-09 21:24:37 发布

阅读量752

点赞数 3

分类专栏：五、前端文章标签： html5 html 前端

CSDN-ThinkLnk/B站-道墨思

本文链接：https://blog.csdn.net/qq_39395109/article/details/126229874

版权

五、前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../导航条/css/index.css">
        <title>导航条</title>
    </head>
    <body>
        <div>
            <div class="Button_frame">
                <button class="Button">首页</button>
                <div class="Button_frame-content">
                    <a href="#">商铺1 1</a>
                    <a href="#">商铺1 2</a>
                    <a href="#">商铺1 3</a>
                </div>
            </div>
            <div class="Button_frame">
                <button class="Button">公告</button>
                <div class="Button_frame-content">
                    <a href="#">商铺1 1</a>
                    <a href="#">商铺1 2</a>
                    <a href="#">商铺1 3</a>
                </div>
            </div>
            <div class="Button_frame">
                <button class="Button">新闻</button>
                <div class="Button_frame-content">
                    <a href="#">商铺1 1</a>
                    <a href="#">商铺1 2</a>
                    <a href="#">商铺1 3</a>
                </div>
            </div>
        </div>
    </body>
</html>

css样式

/**/
*{
    margin: 0;
    padding: 0;
}

/* 容器需要定位下拉内容 */
.Button_frame {
    position: relative;
    display: inline-block;
}

/* 下拉按钮样式 */
.Button {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    /* float: left; */
}


/* 下拉内容 (默认隐藏) */
.Button_frame-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

/* 下拉菜单的链接 */
.Button_frame-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.Button_frame-content a:hover {background-color: #f1f1f1}

/* 在鼠标移上去后显示下拉菜单 */
.Button_frame:hover .Button_frame-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.Button_frame:hover .Button {
    background-color: #3e8e41;
}