하단 줄이있는 탐색 메뉴

Question

탐색 메뉴에서 작업 중이므로 다음과 같은 메뉴를 디자인하고 싶습니다.

내 HTML 코드는

<div id='cssmenu'> 
<ul> 
    <li class='active'><a href='index.html'><span>WOMEN</span></a></li> 
    <li><a href='#'><span>MEN</span></a></li> 
    <li><a href='#'><span>JUNIOR</span></a></li> 
    <li ><a href='#'><span>ACCESSORIES</span></a></li> 
    <li><a href='#'><span>COLLECTION</span></a></li> 
    <li><a href='#'><span>SALE</span></a></li> 
    <li class="last"><a href='#'><span>MY ACCOUNT</span></a></li> 


</ul> 
</div> 

를 제공하고 내 CSS가 주어

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700); 
#cssmenu { 
    background: #fff; 
    width: 100%; 
} 
#cssmenu ul { 
    /*content: ' '; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden;*/ 

} 
#cssmenu ul li { 
    float: left; 
    display: block; 
    padding: 0; 

} 
#cssmenu ul li a { 
    color: #000; 
    text-decoration: none; 
    display: block; 
    padding: 15px 25px; 
    font-family: 'Open Sans', sans-serif; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 14px; 
    position: relative; 

    border-bottom:10px solid #000 ; 
} 
.last { 
float:right; 
padding-left:60px; 
font-style:italic;} 


#cssmenu ul li a:hover { 
    color: #000; 
    border-color:#5ae1e4; 
} 
#cssmenu ul li a:hover:before { 
    /*width: 50%;*/ 
    border-color:#FFF; 
} 
#cssmenu ul li a:after { 
    /*content: ''; 
    display: block; 
    position: absolute; 
    right: -3px; 
    top: 19px; 
    height: 6px; 
    width: 6px; 
    background: #ffffff; 
    opacity: .5;*/ 
} 
#cssmenu ul li a:before { 
/* content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 3px; 
    width: 0; 
    background: #333333; 
    -webkit-transition: width .25s; 
    -moz-transition: width .25s; 
    -ms-transition: width .25s; 
    -o-transition: width .25s; 
    transition: width .25s;*/ 
} 
#cssmenu ul li.last > a:after, 
#cssmenu ul li:last-child > a:after { 
    display: none; 
} 
#cssmenu ul li.active a { 
    color: #333333; 
} 
#cssmenu ul li.active a:before { 
    width: 100%; 
} 
@media screen and (max-width: 768px) { 
    #cssmenu ul li { 
    float: none; 
    } 
    #cssmenu ul li a { 
    width: 100%; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
    #cssmenu ul li a:after { 
    display: none; 
    } 
    #cssmenu ul li a:before { 
    height: 1px; 
    background: #ffffff; 
    width: 100%; 
    opacity: .2; 
    } 
    #cssmenu ul li.last > a:before, 
    #cssmenu ul li:last-child > a:before { 
    display: none; 
    } 
} 

지금 내 출력은 줄입니다

지금 나는 en을 할 때까지 검은 색을 원한다. 나는 100 %처럼 검은 색을 의미한다. 내가 참고로 라인을 제어 할 수있는 능력이 있다면 나는 감사 할 것입니다 : 나를 위해 단지 CSS와 HTML은 미리 감사드립니다 여기

Answer 1

http://jsfiddle.net/bkcG3/

가 테두리 외부 DIV를 사용 허용을

인라인 블록

#cssmenu { 
    background: #fff; 
    width: 100%; 
border-bottom: 10px black solid; 
height: 49px; 
} 

편집 -

:

나는 화면에 당신의 리튬을했다

여분의 공간을 takecare에 CSS 재설정 블록으로 새 피들을 넣었습니다. 다른 브라우저에서 보는 것과 그에 따라 스타일을 수정했습니다. 당신이 맞춤법을 교정 할 수

http://html5doctor.com/html-5-reset-stylesheet/