CodePen

HTML

            
              <ul>
  <li><a href="#">jkfasdf</a></li>
  <li><a href="#">jkffasdf fjaskdfasfs jajklfd fjklasdfas</a></li>
</ul>

<ul>
  <li><a href="#">jkfasdf</a></li>
  <li>
    <ul>
      <li><a href="">jkffasdf </a></li>
      <li><a href="">fjaskdfasfs</a></li>
      <li><a href="">jajklfd</a></li>
      <li><a href="">fjklasdfas</a></li>
    </ul>  
    
    </li>
  </ul>

            
          
!

CSS

            
              ul{
  margin:5px;
  background: red;
  float:left;
  border-radius:5px;
}

ul li {
  display: inline-block;
  width: 100px;
  text-align: center;
  vertical-align: middle;
  padding:5px 0 0 0;
}

ul ul {
  border-radius:none;
  margin:0;
}


a {
  text-decoration:none;
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................