我正在开发一个新版本的网站。现在我对结果几乎满意，除了一个问题。该网站由标题(带有 Logo 和菜单)和内容部分组成。我希望它在大屏幕/小屏幕上都能工作。
在小屏幕上我遇到了一个问题。当我展开菜单时，它位于内容部分的顶部，但内容部分仍可点击，因此菜单选项不可点击且菜单无法正常工作。
我想要的是如下(对于小屏幕，即智能手机): - 当我单击“显示菜单”时，所有菜单选项都将显示(Menu1、Menu2、Menu3、Menu4)并且可以单击。底层文本(div“页面”)不可见(在菜单选项下消失)。 - 当我单击其中一个菜单选项时，子菜单中的所有选项都将显示并可单击。底层文本(div“页面”)不可见。
我已经搜索并尝试了很多选项，但没有得到预期的结果。
提前感谢任何提示:)
我的html如下:
<body>
<div id="wrapper">
<div id="logo">
<img src="#" style="width:180px;height:50px;">
</div>
<div id="menu">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Menu1 ￬</a>
<ul class="hidden">
<li><a href="#">Submenu11</a></li>
<li><a href="#">Submenu12</a></li>
</ul>
</li>
<li><a href="#">Menu2 ￬</a>
<ul class="hidden">
<li><a href="#">Menu21</a></li>
<li><a href="#">Menu22</a></li>
<li><a href="#">Menu23</a></li>
</ul>
</li>
<li><a href="#">Menu3 ￬</a>
<ul class="hidden">
<li><a href="#">Menu31</a></li>
<li><a href="#">Menu32</a></li>
<li><a href="#">Menu33</a></li>
</ul>
</li>
<li><a href="#">Menu4 ￬</a>
<ul class="hidden">
<li><a href="#">Menu41</a></li>
<li><a href="#">Menu42</a></li>
<li><a href="#">Menu43</a></li>
<li><a href="#">Menu44</a></li>
<li><a href="#">Menu45</a></li>
<li><a href="#">Menu46</a></li>
</ul>
</li>
</ul>
</div>
<div id="header">
<h3>Header</h3><hr>
</div>
<div id="pageliquid">
<div id="page">Page-text<br />
</div>
</div>
</div>
</body>
我的 CSS 如下:
body {
margin: 20px;
font-family: Tahoma, Arial;
font-size: 12pt;
color: #001245;
}
#wrapper {
width: 100%;
min-width: 1000px;
max-width: 2000px;
margin: 0 auto;
}
#logo {
height: 50px;
width: 100%;
position: static;
}
#menu {
height: 50px;
width: 100%;
position: static;
}
#header {
height: 75px;
width: 100%;
position: static;
}
#pageliquid {
width: 100%;
position: static;
}
#page {
top: 200px;
max-width: 100%;
position: absolute;
overflow: scroll;
bottom: 1px;
left: 20px;
right: 0px;
}
ul, img {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:200px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
color: #fff;
background: #0b0b3b;
text-decoration: none;
}
li:hover a {
background: #0b0b3b;
}
li:hover ul a {
background: #08088a;
color: #d8d8d8;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
background: #08088a;
color: #ffffff;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: 160px;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
display: none;
-webkit-appearance: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px) {
body {
margin: 0px;
}
#wrapper {
min-width: 0px;
margin: 0;
}
#header {
position: absolute;
}
#page {
left: 0px;
}
ul {
position: absolute;
width: 100%;
display: none;
}
li {
margin-bottom: 1px;
margin-right: 0px;
}
ul li, li a {
width: 100%;
}
li ul li a {
width: 100%;
padding: 0 0px;
}
.show-menu {
display:block;
}
}
最佳答案
问题出在菜单的 z-index，因为 #menu 的固定高度和自然高度以及该菜单的绝对定位导致它位于页面后面元素的下方。您在这里有重复的 ID，但是在 #menu 上强制使用更高的 z-index 会将导航置于页面上其他元素之上。这还需要在 #menu 上将 position: static; 更改为 position: relative;。这是一个演示 - http://codepen.io/anon/pen/MJwoOL (PS - 你的嵌套 li 和 ul 有一些重叠的问题，我也在你的媒体查询中做了一些调整，但与你的问题无关这里)
关于html - css 菜单无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41515403/