響應菜單顯示behing內容

我正在重做朋友的website。菜單在全寬時看起來很好，但當您爲響應而調整大小時，菜單看起來很透明並覆蓋了內容。我怎樣才能解決這個問題？我也有一個小提琴在這裏，我提出https://jsfiddle.net/mlegg10/co62auy0/響應菜單顯示behing內容

#menuBackground { 
 
    background:#5EA5B9; 
 
    width:100%; 
 
    height:50px; 
 
    text-align: center; 
 
} 
 
#menuContainer { 
 
    text-align: center; 
 
} 
 
/*Strip the ul of padding and list styling*/ 
 
ul { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
/*Create a horizontal list with spacing*/ 
 
li { 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    margin-right:1px; 
 
} 
 

 
/*Style for menu links*/ 
 
li a { 
 
    display:block; 
 
    min-width:140px; 
 
    height:50px; 
 
    text-align:center; 
 
    line-height:50px; 
 
    font-family:Georgia; 
 
    color:#fff; 
 
    background:#5EA5B9; 
 
    text-decoration:none; 
 
    font-size: 1rem; 
 
} 
 

 
/*Hover state for top level links*/ 
 
li:hover a { 
 
color: #036;  
 
    background:#fff 
 
} 
 

 
/*Prevent text wrapping*/ 
 
li ul li a { 
 
    width:auto; 
 
    min-width:100px; 
 
    padding:0 20px 
 
} 
 

 
/*Style 'show menu' label button and hide it by default*/ 
 
.show-menu { 
 
    font-family:Georgia; 
 
    text-decoration:none; 
 
    color:#fff; 
 
    background:#5EA5B9; 
 
    text-align:center; 
 
    padding:16px 0; 
 
    display:none; 
 
    width:100%!important 
 
} 
 

 
/*Hide checkbox*/ 
 
input[type=checkbox] { 
 
    display:none 
 
} 
 

 
/*Show menu when invisible checkbox is checked*/ 
 
input[type=checkbox]:checked ~ #menu { 
 
    display:block; 
 
    margin:0 auto 
 
} 
 

 
/*Responsive Styles*/ 
 
@media screen and (max-width : 760px) { 
 
    /*Make dropdown links appear inline*/ 
 
    ul { 
 
     position:static; 
 
     display:none; 
 
     white-space: initial; 
 
    } 
 
    
 
    /*Create vertical spacing*/ 
 
    li { 
 
     margin-bottom:1px 
 
    } 
 
    
 
    /*Make all menu links full width*/ 
 
    ul li,li a { 
 
     width:100% 
 
    } 
 
    
 
    /*Display 'show menu' link*/ 
 
    .show-menu { 
 
     display:block 
 
    } 
 
}

<div id="menuBackground"> 
 
    <div id="menuContainer"> 
 
     <label for="show-menu" class="show-menu">Show Menu</label>  <input type="checkbox" id="show-menu" role="button" /> 
 
     <ul id="menu"> 
 
      <li><a href="index.html">Home</a> 
 
      </li> 
 
      <li><a href="accommodations.html">Accommodations</a> 
 
      </li> 
 
      <li><a href="amenities.html">Amenities</a> 
 
      </li> 
 
      <li><a href="rates.html">Rates</a> 
 
      </li> 
 
      <li><a href="links.html">Links</a> 
 
      </li> 
 
      <li><a href="contact.html">Contact</a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

來源

2016-05-12 mlegg

它不是與菜單，它與內容的問題的問題。更新你的問題，以顯示內容的CSS和HTML，最有可能的Z - 索引問題 –

加入這個工作對我來說：

#menuContainer { 
    text-align: center; 
    position: absolute; 
    width: 90%; 
    z-index: 1; 
}

，並在菜單元素之間消除空間刪除1px的保證金爲鋰標籤

來源

2016-05-13 02:46:48 stannersuperior

謝謝，這讓我瘋狂！ – mlegg

嘿@mlegg我想你可能把錯誤的答案對了。您能否請您標記解決您的問題的正確答案？抱歉打擾你，謝謝。 – stannersuperior

你可以嘗試設置在#menuBackground DIV的Z-index。要做到這一點，你還必須指定一個相對位置。

#menuBackground { 
    position:relative; 
    z-index:10 
}

來源

2016-05-12 23:17:10

不起作用。我應該提到，我也嘗試過，原來也是 – mlegg

這是所有最終工作代碼你的幫助。謝謝！

#menuBackground { 
 
    background:#5EA5B9; 
 
    width:100%; 
 
    height:50px; 
 
    text-align: center; 
 
} 
 
#menuContainer { 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 90%; 
 
    z-index: 1; 
 
} 
 
/*Strip the ul of padding and list styling*/ 
 
ul { 
 
    list-style-type:none; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
/*Create a horizontal list with spacing*/ 
 
li { 
 
    display:inline-block; 
 
    vertical-align: top; 
 
} 
 

 
/*Style for menu links*/ 
 
li a { 
 
    display:block; 
 
    min-width:140px; 
 
    height:50px; 
 
    text-align:center; 
 
    line-height:50px; 
 
    font-family:Georgia; 
 
    color:#fff; 
 
    background:#5EA5B9; 
 
    text-decoration:none; 
 
    font-size: 1rem; 
 
} 
 

 
/*Hover state for top level links*/ 
 
li:hover a { 
 
color: #036;  
 
    background:#fff 
 
} 
 

 
/*Prevent text wrapping*/ 
 
li ul li a { 
 
    width:auto; 
 
    min-width:100px; 
 
    padding:0 20px 
 
} 
 

 
/*Style 'show menu' label button and hide it by default*/ 
 
.show-menu { 
 
    font-family:Georgia; 
 
    text-decoration:none; 
 
    color:#fff; 
 
    background:#5EA5B9; 
 
    text-align:center; 
 
    padding:16px 0; 
 
    display:none; 
 
    width:100%!important 
 
} 
 

 
/*Hide checkbox*/ 
 
input[type=checkbox] { 
 
    display:none 
 
} 
 

 
/*Show menu when invisible checkbox is checked*/ 
 
input[type=checkbox]:checked ~ #menu { 
 
    display:block; 
 
    margin:0 auto 
 
} 
 

 
/*Responsive Styles*/ 
 
@media screen and (max-width : 760px) { 
 
    /*Make dropdown links appear inline*/ 
 
    ul { 
 
     position:static; 
 
     display:none; 
 
     white-space: initial; 
 
    } 
 
    
 
    /*Make all menu links full width*/ 
 
    ul li,li a { 
 
     width:100% 
 
    } 
 
    
 
    /*Display 'show menu' link*/ 
 
    .show-menu { 
 
     display:block 
 
    } 
 
}

來源

2016-05-13 13:15:41 mlegg

響應菜單顯示behing內容

回答

相關問題