title: <ul> display inline-block not working
body: <p>My jsFiddle is here : <a href="https://jsfiddle.net/r1s6651y/1/" rel="nofollow">https://jsfiddle.net/r1s6651y/1/</a></p>
  
  <p>I am not able to get Navigation with Numerals to be aligned horizontally.</p>
  
  <p>I have applied <code>display : inline-block</code> for upper <code>ul</code> but still the next menu item begins on the second line.</p>
  
  <p>Any clues ?</p>
  
  <p>It should be stacked as : </p>
  
  <pre><code>1111111    22222222
  
  AAAAAAAAAAAAA
  
  BBBBBBBBBBBBB
  </code></pre>