Search code examples
htmlcsslistborderbackground-color

background-color and borders in combination for nested lists in CSS

I have a nested list with borders. Now I want to put a background-color to the items/elements of the list the border disappears. Anyone knowing a solution for this?

Here is my CSS:

.menu-level-0 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #000;
}

.menu-level-0 li {
    line-height: 2em;
    position: relative;
    line-height: 140%;
    /*background-color: #f0f2f1;*/
}

.menu-level-0 li ul {
    list-style-type: none;
    padding-left: 1em;
    font-size: 12px;
}

.menu-level-0 li:after {
    content:"\00A0";
    position: absolute;
    width: 200%;
    left: -100%;
    top: 0;
    border-top: 1px solid black;
    z-index: -1;
}

This works totally fine but if I put the background-color: #f0f2f1; (which is in a comment at the moment) the borders "disappear" - or rather get covered by the background color...

Solution 
  •     .menu-level-0 {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: normal;
    border: 1px solid #000;
}

.menu-level-0 li {
    line-height: 2em;
    position: relative;
    line-height: 140%;
    background-color: #f0f2f1;
    z-index: 1;
}

.menu-level-0 li ul {
    list-style-type: none;
    padding-left: 1em;
    font-size: 12px;
}

.menu-level-0 li:after {
    content:"\00A0";
    position: absolute;
    width: 200%;
    left: -100%;
    top: 0;
    border-top: 1px solid black;
    z-index: 0;
}