html - HTML / CSS导航栏下拉菜单在后台?
问题描述
您好,我从一个带有 html、css 等的网站开始,只是在导航栏上很忙,问题是 dropdwon 导航栏似乎在正文内容后面?有谁知道为什么,我试过 z-index 没有成功?
截图:https ://drive.google.com/uc?id=162Xk8sNiF-mAfe9oWTLZyybSgQAtCyi-
示例:https ://jsfiddle.net/atxkbjd3
提前致谢。
HTML:
<header>
<div class="navbar">
<h1 class="logo">Test</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="dropdown">
<a href="#social" class="dropbtn">Social</a>
<div class="dropdown-content">
<a href="#forum">Forum</a>
...
</div>
</li>
<li class="dropdown">
<a href="#game" class="dropbtn">Game</a>
<div class="dropdown-content">
<a href="#changelog">test 1</a>
...
</div>
</li>
...
</nav>
</div>
</header>
CSS
...
nav>ul>li {
display: inline-block;
margin-left: 70px;
padding-top: 17px;
position: relative;
}
nav>ul>li>a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
...
.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: inline-block;
text-align: left;
}
...
解决方案
删除overflow
hidden
_header
header {
background: #EDEDED;
/*overflow: hidden;*/
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
推荐阅读
- mongodb - 使用 MongoDB 部分索引功能是否有效?
- bash - 列出 Cygwin/bash 脚本中包含空格的某些文件夹
- c++ - 内存分配心智图说明
- r - R Shiny - 使用 javascript 直接从 UI 触发闪亮警报弹出窗口
- python - 有没有办法在 python 中编写快速嵌套循环?
- sql - 在 Oracle 中只显示查询的第一行
- visual-studio-2019 - Visual Studio 2019 - 删除双 CTRL+S 作为保存文件的快捷方式
- swift - 如何解决 Xcode 中 MKMapView 的问题
- javascript - Firebase Firestore 快照读取计数
- python - 用于替换对象中键值对的 Python 函数返回意外输出