css-menu无法正常工作

我正在研究网站的新版本。现在我对结果几乎满意，除了一个问题。该网站由一个标题（带有标志和菜单）和一个内容部分组成。我希望它可以在大尺寸/小尺寸屏幕上工作。css-menu无法正常工作

在小屏幕上，我遇到了一个问题。当我展开菜单时，它位于内容部分的顶部，但内容部分仍然是可点击的，所以菜单选项不可点击并且菜单不能正常工作。

我想要的是如下（对于小屏幕，即智能手机）： - 当我点击'显示菜单'时，所有菜单选项都会出现（菜单1，菜单2，菜单3，菜单4）并且可点击。底层文本（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 &#65516;</a> 
      <ul class="hidden"> 
      <li><a href="#">Submenu11</a></li> 
      <li><a href="#">Submenu12</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu2 &#65516;</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 &#65516;</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 &#65516;</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; 
    } 
}

来源

2017-01-06 Michiel Kromhout van der Meer

有很多去在那里我们必须想象。如果您发布演示或链接，您的问题可能会更清晰并且更容易解决？ – sol

的问题是与z指数因为它位于页面后面的元素之下，因为其固定的高度和自然高度以及该菜单的绝对位置。您在这里有重复的ID，但强制#menu上的更高z-index会将导航放在页面上的其他元素上方。这也需要在#menu上更改position: static;到position: relative;。这里有一个演示 - http://codepen.io/anon/pen/MJwoOL（PS - 有一些重叠的问题与你的嵌套li的和ul的，我调整了一点点在你的媒体查询，也不过是无关这里你的问题）

来源

2017-01-06 22:50:39

非常感谢！花了我几个小时才弄明白，但没有成功。你做到了:) –

@MichielKromhoutvanderMeer欢迎您！ –

css-menu无法正常工作

回答

相关问题