html - navigation menu with bottom line -

html - navigation menu with bottom line -

i working on navigation menu, want design menu following.

my html code give

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

and css given

@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 { 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 { color: #333333; } #cssmenu ul li.active a:before { width: 100%; } @media screen , (max-width: 768px) { #cssmenu ul li { float: none; } #cssmenu ul li { 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; } }

now output give

now want black till en.. means of black 100%. thankful if have ability command line note: me css , html allowed give thanks in advance

http://jsfiddle.net/bkcg3/

here utilize outside div border

i made li display:inline-block

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

edit-

new fiddle css reset block takecare of spaces been seeing of different browsers, , fixed styles accordingly.

http://jsfiddle.net/bkcg3/1/

make sure read

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

html css css3