响应菜单显示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内容

回答

相关问题