レスポンシブ・メニューが適切なコンテンツを表示しています

Question

私は友人のwebsiteをやり直しています。 メニューが全幅になってもメニューは正常に表示されますが、レスポンスのためにメニューのサイズを変更すると、メニューが透明になり、コンテンツがオーバーレイされます。これをどうすれば解決できますか？また、私はあなたが#menuBackground div要素にZインデックスを設定しようとすることができhttps://jsfiddle.net/mlegg10/co62auy0/

#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>

Answer 1

は私のために働いた：

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

とメニュー要素間のスペースを除去するためには、これは、すべての最終作業コードである李タグの

Answer 2

を作ったことをここフィドルを持っています。そのためには、相対的な位置も指定する必要があります。

これを追加すること

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

Answer 3

を1pxのマージンを削除しますあなたの助け。ありがとう！

#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 
 
    } 
 
}