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