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