title: CSS drop down menu 2nd level inline-block view
body: <p>I guess the answer is simple, but still, I cannot figure out how to make my second level menu viewed as an inline-block - from this:</p>
  
  <p><img src="https://i.stack.imgur.com/2LXnV.png" alt="enter image description here"></p>
  
  <p>to this:</p>
  
  <p><img src="https://i.stack.imgur.com/3XDaU.png" alt="enter image description here"></p>
  
  <p>So what I need is an inline block-listing + text aligned to the center.
  Thank you very much for your help.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul id="menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;The Team&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;History&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Vision&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Cozy Couch&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Great Table&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Small Chair&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shiny Shelf&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Invisible Nothing&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Online&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Right Here&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Somewhere Else&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>    ul {
      font-family: Arial, Verdana;
      font-size: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
      ul li {
      display: block;
      position: relative;
      float: left;
  }
  li ul {
      display: none;
  }
  ul li a {
      display: block;
      text-decoration: none;
      color: #ffffff;
      border-top: 1px solid #ffffff;
      padding: 5px 15px 5px 15px;
      background: #1e7c9a;
      margin-left:1px;
      white-space: nowrap;
  }
  ul li a:hover { 
      background: #BBBBBB;
  }
  li:hover ul {
      display: block;
      position: absolute;
  }
  li:hover li {
      float: none;
      font-size: 11px;
  }
  li:hover a { 
      background: #3b3b3b; 
  }
  li:hover li a:hover {
      background: #CCC;
  }
  </code></pre>