Html css菜单工作不正常
我正在开发一个新版本的网站。现在我对结果几乎满意,除了一个问题。该网站由标题(带有徽标和菜单)和内容部分组成。我希望它在大屏幕和小屏幕上都能工作 在小屏幕上,我遇到了一个问题。当我展开菜单时,它位于内容部分的顶部,但内容部分仍然可以单击,因此菜单选项不可单击,并且菜单工作不正常 我想要的如下(对于小屏幕,即智能手机): -当我单击“显示菜单”时,所有菜单选项都将显示(菜单1、菜单2、菜单3、菜单4)并可单击。基础文本(div“page”)不可见(在菜单选项下消失)。 -当我单击其中一个菜单选项时,子菜单中的所有选项都将显示并可单击。基础文本(div“page”)不可见 我已经搜索并尝试了许多选项,但没有得到预期的结果 提前感谢您的任何提示:) 我的html如下所示:Html css菜单工作不正常,html,css,Html,Css,我正在开发一个新版本的网站。现在我对结果几乎满意,除了一个问题。该网站由标题(带有徽标和菜单)和内容部分组成。我希望它在大屏幕和小屏幕上都能工作 在小屏幕上,我遇到了一个问题。当我展开菜单时,它位于内容部分的顶部,但内容部分仍然可以单击,因此菜单选项不可单击,并且菜单工作不正常 我想要的如下(对于小屏幕,即智能手机): -当我单击“显示菜单”时,所有菜单选项都将显示(菜单1、菜单2、菜单3、菜单4)并可单击。基础文本(div“page”)不可见(在菜单选项下消失)。 -当我单击其中一个菜单选项时
<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>
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索引,因为它位于页面上后面的元素下方,这是由于
#menu
的固定高度和自然高度以及该菜单的绝对位置造成的。这里有重复的ID,但是在#菜单上强制使用更高的z索引将导航置于页面上其他元素之上。这也需要改变位置:静态代码>至<代码>位置:相对在#菜单上也显示code>。这是一个演示-(PS-您的嵌套li
和ul
存在一些重叠问题,我在您的媒体查询中也对其进行了一些调整,但与您的问题无关)我们不得不想象其中有很多问题。如果你发布了一个演示或链接,你的问题可能会更清晰、更容易解决?