title: navigation menu with bottom line
body: <p>I am working on navigation menu, I want to design a menu which will look like following. </p>
  
  <p><img src="https://i.stack.imgur.com/i5VOT.png" alt="the menu that i need is give"></p>
  
  <p>my html code is give</p>
  
  <pre><code>&lt;div id='cssmenu'&gt;
  &lt;ul&gt;
      &lt;li class='active'&gt;&lt;a href='index.html'&gt;&lt;span&gt;WOMEN&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;MEN&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;JUNIOR&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li &gt;&lt;a href='#'&gt;&lt;span&gt;ACCESSORIES&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;COLLECTION&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;SALE&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="last"&gt;&lt;a href='#'&gt;&lt;span&gt;MY ACCOUNT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  
  
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my css is given</p>
  
  <pre><code>@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 &gt; a:after,
  #cssmenu ul li:last-child &gt; 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 &gt; a:before,
    #cssmenu ul li:last-child &gt; a:before {
      display: none;
    }
  }
  </code></pre>
  
  <p>now my output is give</p>
  
  <p><img src="https://i.stack.imgur.com/WrD4e.png" alt="The output resul"></p>
  
  <p>now I want the black like till to en.. I means the with of the black like 100%.
  I will be thankful if I have the ability to control the line with
  Note: for me only css and html is allowed
  thank you in advance</p>