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

Yukimi Sato 245views 更新:2014年8月1日
#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よりも上であること
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません