css设置下拉菜单

最新推荐文章于 2022-11-11 09:01:48 发布

Mo neyking

最新推荐文章于 2022-11-11 09:01:48 发布

阅读量395

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_41701054/article/details/85201987

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html>
<head>
<title>下拉菜单实例</title>
<meta charset="utf-8">
<style>
.dropbtn {
    background-color:#CCC;
    color: #000;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #093;
}
</style>
</head>
<body>

<h2>下拉菜单</h2>
<p>鼠标移动到按钮上打开下拉菜单。</p>

<div class="dropdown">
  <button class="dropbtn">下拉菜单</button>
  <div class="dropdown-content">
    <a href="#">首页</a>
    <a href="#">新闻</a>
    <a href="#">关于</a>
  </div>
</div>

</body>
</html>

效果图：

在这里插入图片描述

Mo neyking

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css设置下拉菜单

代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;下拉菜单实例&lt;/title&gt;&lt;meta charset="utf-8"&gt;&lt;style&gt;.dropbtn { background-color:#CCC; color: #000; pa
复制链接

扫一扫