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無法正常工作

回答

相關問題