响应式菜单显示了惊人的内容

Question

我正在重做朋友的website。 菜单看起来很好，当它是全宽时，但当你调整它以便响应时，菜单看起来是透明的并覆盖了内容。我怎样才能解决这个问题？我在这里也有一个小提琴我https://jsfiddle.net/mlegg10/co62auy0/

＆＃13;

＆＃13;

Office.Interop

＆＃13;

self.update()

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以尝试在#menuBackground div上设置z-index。为此，您还必须指定相对位置。

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

Answer 2

添加这个对我有用：

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

并删除菜单元素之间的空格，删除li-tags的1px页边距

Answer 3

这是您所有帮助中的最终工作代码。谢谢！

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;