html - 如何使下拉菜单出现在另一个 div 的顶部?
问题描述
这已经困扰了我两天了,我已经阅读了许多网站和解释,并且似乎尝试了一切,但显然我错过了一些东西。
下面是几乎来自 W3schools 网站的代码,我已将其插入到一个非常基本的页面中,但下拉菜单希望保留在其自己的 div 中,而不是在其下方的顶部打开。
我已经调整了 css 以包含各种 z-index 值,但似乎没有任何效果。
有人能帮助我吗?
这是整个页面和css文件。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div class="fullpage">
<div class="pageheader">
<div class="header">
</div>
</div>
<div class="pagemenu">
<div class="mainmenu">
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.fullpage {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #800000;
z-index: 0;
overflow: hidden;
}
.pageheader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 160px;
background-color: #b00000;
z-index: 1;
overflow: hidden;
}
.header {
position: relative;
margin: auto;
max-width: 1200px;
min-width: 900px;
height: 160px;
background-color: #b0b0b0;
z-index: 2;
overflow: hidden;
}
.pagemenu {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 56px;
background-color: #202020;
z-index: 1;
overflow: hidden;
}
.mainmenu {
margin: auto;
width: 1200px;
height: 56px;
background-color: #000000;
z-index: 2;
overflow: hidden;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
z-index: 3;
}
.dropdown {
float: left;
overflow: hidden;
z-index: 4;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
z-index: 4;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
z-index: 4;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 10;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
z-index: 10;
}
.dropdown-content a:hover {
background-color: #ddd;
z-index: 10;
}
.dropdown:hover .dropdown-content {
display: block;
z-index: 10;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div class="fullpage">
<div class="pageheader">
<div class="header">
</div>
</div>
<div class="pagemenu">
<div class="mainmenu">
<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
只需从此处删除“溢出:隐藏”:
.pagemenu {
position: absolute;
left: 0;
top: 160px;
width: 100%;
height: 56px;
background-color: #202020;
z-index: 1;
overflow: hidden;
}
推荐阅读
- python - 遍历从 cvs 解析的列表。柱子
- c# - 有没有办法在不改变格式的情况下修改 JSON?
- powershell - 不止一个是的,在powershell中没有问题
- python - 在 TF2 中将 Keras RNN 模型转换为 TensorFlow Lite 模型
- python - DataFrame 没有给我我需要的情节
- javascript - 如何检查 getElementsByClassName 的位置?
- javascript - 在没有 Babel 的情况下编写服务器端 JavaScript 时如何使用 ES6 特性?
- linux - 我似乎无法让 Fail2ban 成功禁止尝试针对我们的电子邮件服务器进行身份验证的 IP 地址
- javascript - JWT 验证在控制台日志打印令牌时返回 null 就好了
- javascript - 反应映射嵌套数据