title: how to make css sub menu links longer than parent link
body: <p>I have a CSS vertical menu with horizontal sub menu links</p>
  
  <p><a href="http://jsfiddle.net/xmgMq/1/" rel="nofollow">http://jsfiddle.net/xmgMq/1/</a></p>
  
  <p>i am trying to make the sub menu links the same width as the text of the link without changing the width of the parent link.</p>
  
  <p>here is my CSS:</p>
  
  <pre><code>.vertical-nav {
      height:auto;
      list-style:none;
      width: 400px; /******* MODIFIED ********/
      margin: 20px 0 0 0;
  }
  .vertical-nav li {
      height: 25px;
      margin: 0;
      padding: 5px 0;stac
      background-color: #666;
      border: none;
      text-align: center;
      display: inline-block;
      float: left;
      width: 200px;  /******* MODIFIED ********/
  }
  .vertical-nav li:hover {
      background-color:#f36f25;
      color:#FFFFFF;
  }
  .vertical-nav li a {
      font-family:Calibri, Arial;
      font-size:18px;
      font-weight:bold;
      color:#ffffff;
      text-decoration:none;
  }
  .vertical-nav li.current {
      background-color:#F36F25;
  }
  .vertical-nav li.current a {
      color:#FFFFFF;
  }
  vertical-nav ul li ul {
      display:none;
      list-style-type:none;
      width:125px;
      padding:0px;
      margin-top:3px;
      margin-left:-5px;
  }
  vertical-nav ul li:hover ul {
      display:block;
  }
  vertical-nav ul li:hover ul li {
      background-color:#555555;
      width:125px;
      height:30px;
      display:inline-block;
  }
  vertical-nav ul li ul li:hover {
      background-color:#333333;
  }
  vertical-nav ul li ul li a {
      color:#FFF;
      text-decoration:underline;
  }
  vertical-nav ul li ul li a:hover {
      text-decoration:none;
  }
  .vertical-nav li ul {
      display: none;
      margin-top: 6px;
      padding: 0;
  }
  .vertical-nav li:hover ul {
      display: block;
  }
  </code></pre>
  
  <p>i have made the width of the sub menu links 200px which then doesnt display all the text if its longer or if i make it 100% it only does 100% of the parent link</p>