title: Center a horizontal CSS menu
body: <p>I have a CSS menu using the following CSS.</p>
  
  <p>What is the best way to center the whole menu on the page?</p>
  
  <p>I have tried using another <code>&lt;div&gt;</code> outside <code>&lt;nav&gt;</code> and setting margins but its just aligning left all the time.</p>
  
  <p></p>
  
  <pre><code>nav {
      margin: 0 auto; 
      text-align: center;
      border:1px solid black;
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul li:hover &gt; ul {
      display: block;
  }
  
  nav ul {
      list-style: none;
  }
  
  nav ul li {
      float: left;
  }
  
  nav ul li:hover a {
      color: #000000;
  }
  
  nav ul li a {
      display: block; 
      padding: 10px 15px;
      color: #000000;
      text-decoration: none;
  }       
  
  nav ul ul {
      border-radius: 0px;
      padding: 0;
      position: absolute;
  }
  
  nav ul ul li {
      float: none; 
      border-top: 1px solid #000000;
      border-bottom: 1px solid #000000;
      position: relative;
  }
  
  nav ul ul li a {
      color: #000000;
  }
  
  nav ul ul li a:hover {
      color: #666666;
  }
  
  nav ul ul ul {
      position: absolute;
      top:0;
  }
  </code></pre>
  
  <p>jsfiddle : <a href="http://jsfiddle.net/njuVm/" rel="nofollow">http://jsfiddle.net/njuVm/</a></p>