title: How to center this <nav> element navigation bar of no width
body: <p>I am having some problem with centering this horizontal navigation bar. Here is my JSFiddle: <a href="http://jsfiddle.net/W796k/embedded/result/" rel="nofollow">http://jsfiddle.net/W796k/embedded/result/</a>
  I'm looking for two things:
  1. How can I center the navigation bar horizontally without putting a specified width?
  2. How to further add some more 'li' in the 'ul' so that all the 'li's wil be squeezed automatically to make room for the new added 'li's in the navigation bar?</p>
  
  <p>Have I made everything clear? Ask me if you need more info. Thank U all in advance.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;Doctype! html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;title&gt; horizontal dropdown menu &lt;/title&gt;
  
  &lt;style type="text/css" media="screen"&gt;
  
      a{
          font-family: "verdana", sans-serif;
          font-weight: bold;
      }
      nav ul{
          list-style: none;
          position: relative;
          background: #efefef;
          background: linear-gradient (top,#efefef,#bbbbbb);
          background: moz-linear-gradient (top, #efefef,#bbbbbb);
          background: webkit-linear-gradient (top,#efefef,#bbbbbb);
          box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
          padding: 0 20px;
          border-radius: 10px;
          display: inline-table;
      }
      nav ul li{
          display: inline-block;
          border-right: 1px solid #fff;
      }
      nav ul li:hover{
          background: #5b545f;
          background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
          background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
          background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
      }
      nav ul li a{
          text-decoration: none;
          color: #000;
          padding: 20px 20px;
          display: block;
      }
      nav ul li:hover a{
          color: #ffffff;
      }
      nav ul ul{
          background: #5f6975;
          border-radius: 0; padding: 0;
          position: absolute; top: 100%;
          display: none;
      }
      nav ul li:hover &gt; ul{
          display: block;
      }
      nav ul ul li{
          display: block;
          border-top: 1px solid #6b727c;
          border-bottom: 1px solid #575f6a;
          border-right: 0;
          position: relative;
      }
      nav ul ul li a{
          padding: 10px 40px;
      }
      nav ul ul li a:hover{
          background: #4b545f;
      }
      nav ul ul ul{
          position: absolute; left: 100%; top: 0;
      }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt; Home &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; Works &amp;#8595 &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt; Photoshop &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt; Illustrator  &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt; Web Design &amp;#8594 &lt;/a&gt;
                          &lt;ul&gt;
                              &lt;li&gt;&lt;a href="#"&gt; HTML &lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt; CSS &lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; Downloads &amp;#8595 &lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="#"&gt; Softwares &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt; Ebooks &lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; About Us &lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt; Contact &lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>