borderを重ねてアクティブ状態を示す

#header{
padding: 0;
border-bottom: 1px solid #e2e2e2; //この線の上にアクティブ状態のborderを重ねます
z-index: 1;
}

#header ul{
padding: 0;
margin: 0;
}

#header ul li{
position: relative;　//あくまでも基準点はliで
padding: 0;
margin: 0;
}

#header ul li a{
display: block;
}

#header ul li.active a:after{
content: " ";
position: absolute;
bottom: -1px; //-1することで上にかぶせる位置に動かします
left: 0;
height: 1px;
width: 100%;
background: #000000;
z-index: 2;　//#headerよりも上であること
}