早上好
我只使用 html 和 css 实现了一个下拉菜单，但是我遇到了两个问题。
首先是菜单后面的数据仍然显示并且可以“通过”菜单看到，我尝试了一些东西，例如 z-index 无济于事，不确定我是否遗漏了什么？
第二个问题是单击菜单栏中的链接不起作用，但是当屏幕展开并正常显示时它们会起作用。
我创建了一个 plunk 来说明这个问题: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXAMPLE</title>
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="menuButton.css">
</head>
<body>
<nav id="mainNavigation">
<img src="example.png" alt="Logo">
<div>
<button id="expandMenuButton">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
<ul>
<li><a href="TEST">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>
<div class="pageContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</body>
</html>
应用.css
body {
background: #666;
margin: 0;
padding: 0;
}
.pageContent {
background: #fff;
margin: 0 20px;
padding: 20px;
}
#mainNavigation {
background: #999;
width: 100%;
height: 60px;
display: flex;
}
#mainNavigation > img {
height: 60px;
width: 80px;
}
#mainNavigation > div {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: stretch;
margin-left: auto;
justify-content: flex-end;
}
#mainNavigation > div > ul {
padding: 0;
margin: 0;
display: flex;
visibility: visible;
}
#mainNavigation > div > ul > li {
display: flex;
align-items: center;
padding: 10px 15px;
list-style-type: none;
}
#mainNavigation > div > ul > li > a {
text-decoration: none;
color: #fff;
}
@media screen and (min-width:600px) {
#mainNavigation > div {
flex-direction: row;
}
#mainNavigation > div > ul {
flex-direction: row;
align-items: stretch;
}
#mainNavigation > div > button {
display: none;
}
}
@media screen and (max-width:600px) {
#mainNavigation > div {
flex-direction: column;
justify-content: flex-end;
}
#mainNavigation > div > ul {
visibility: hidden;
display: flex;
flex-direction: column;
}
#mainNavigation > div > button:focus ~ ul {
visibility: visible;
}
#mainNavigation > div > ul > li {
background: #888;
display: flex;
align-items: center;
padding: 30px 15px;
list-style-type: none;
}
}
菜单栏.css
#expandMenuButton {
background: inherit;
padding: 5px;
margin: 0;
border: none;
min-height: 60px;
}
#expandMenuButton:focus {
outline: none;
}
#expandMenuButton > .bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
margin-left: auto;
transition: 1s;
}
/* Rotate bars on click */
#expandMenuButton:focus > .bar1 {
transform: rotate(360deg);
}
#expandMenuButton:focus > .bar2 {
transform: rotate(360deg);
}
#expandMenuButton:focus > .bar3 {
transform: rotate(360deg);
}
https://plnkr.co/edit/yiFvqED51uhqpFTaQsc8?p=info
总而言之，我的主要问题是如何将所有元素隐藏在一个元素后面，以及如何在仅使用同级 :focus css 显示元素时启用链接。
如果您需要更多信息，请告诉我!
请注意，有些人不确定如何使用 plunkr:
缩小窗口直到菜单被隐藏，然后点击三行打开菜单这应该显示如下:
最佳答案
好吧，伙计们，对不起，我一定是傻了!
为了隐藏下拉列表背后的信息，我只需要添加 z-index: 1;到 UL(我想我之前将它添加到 li)。
为了使按钮能够被点击，我需要添加:
#mainNavigation > div > ul:hover {
display: flex;
flex-direction: column;
}
这意味着当 ul 悬停在它上面时它仍然包含在 dom 中并因此显示 :)
关于HTML5 和 CSS3 下拉菜单显示错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37022586/