title: How To: Center Horizontal Menu & SubMenu
body: <p>How do I horizontally center this navigation menu and submenu? Setting a smaller navigation list "Width" and setting "Margin:0 auto" does not work. I would also like the keep the background color of the navigation bar across the entire width of the page. </p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="slide-down-page"&gt;
      &lt;ul id="nav"&gt;
      &lt;li id= "bio"&gt;&lt;a class="active btn" href="home.html"&gt;Bio&lt;/a&gt;&lt;/li&gt;
      &lt;li id= "portfolio"&gt;&lt;a href="portfolio.html"&gt;Portfolio&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Writing&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Illustrations&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Design&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt; 
      &lt;/li&gt;
      &lt;li id= "contact"&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>#nav{
  margin: 0 ; padding: 0;
  position: fixed;
  width: 100%;
  background:#e7e7e7;
  }
  
  #nav li {
  list-style: none;
  display: inline-block;
  float: left;
  }
  
  #nav li a{
  padding: 1em 2em;
  display: inline-block;
  text-decoration: none;
  color: #F2583E;
  font-family: 'Helvetica Neue';
  font-size:1.25em;
  background: #e7e7e7;
  text-align: center;
  margin: 0 auto;
  }
  
  #nav li a:hover{
  background-color: #C1DAD6;
  }
  
  #nav a.active, #nav li:hover a.active{
  background-color: #F2583E;
  color: #F7F3E8;
  cursor: default;
  }
  
  /*SubMenu*/
  #nav li ul{
  display: none;
  }
  
  #nav li:hover ul{
  display: block;
  position: absolute;
  top: 63px;
  width: 100%
  left:0px;
  background: #C1DAD6;
  color:white;
  }
  
  #nav li:hover ul li, #nav li:hover ul li a{
  display: inline-block;
  float: left;
  padding: 5px;
  color:white;
  background: #C1DAD6;
  }
  
  #nav li ul li:hover a{
  color: #77bed2;
  }
  
  #nav li ul li{ 
   _display: inline-block; /* for IE5*/
   }
  
  #nav li ul li a{
  width: 150px;
  }
  </code></pre>