title: Centering menu items in a 100% width CSS drop down menu
body: <p>I'm extremely new to CSS--I'm talking I just started learning it yesterday.  Anyways, I have a 100% width drop down menu bar that I want to have the contents(links) centered in the menu.  I've Googled all day and tried many different things, but can't seem to figure it out.  Here's my CSS:</p>
  
  <pre><code>.menu{
  border:none;
  text-align:center;
  border:0px;
  margin:0px;
  width:100%;
  padding:0px;
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
  font-size:14px;
  font-weight:bold;
  
  }
  .menu ul{
  background:#333333;
  height:35px;
  list-style:none;
  margin:0;
  padding:0;
  
  }
  .menu li{
      float:left;
      padding:0px;
      }
  .menu li a{
      background:#333333 url(seperatornew.gif") bottom right no-repeat;
      color:#cccccc;
      display:block;
      font-weight:normal;
      line-height:35px;
      margin:0px;
      padding:0px 25px;
      text-align:center;
      text-decoration:none;
      }
      .menu li a:hover, .menu ul li:hover a{
          background: #c20000 url("hovernew.gif") bottom center no-repeat;
          color:#FFFFFF;
          text-decoration:none;
          }
  .menu li ul{
      background:#333333;
      display:none;
      height:auto;
      padding:0px;
      margin:0px;
      border:0px;
      position:absolute;
      width:225px;
      z-index:200;
      /*top:1em;
      /*left:0;*/
      }
  .menu li:hover ul{
      display:block;
  
      }
  .menu li li {
      background:url('sub_sep.gif') bottom left no-repeat;
      display:block;
      float:none;
      margin:0px;
      padding:0px;
      width:225px;
      }
  .menu li:hover li a{
      background:none;
  
      }
  .menu li ul a{
      display:block;
      height:35px;
      font-size:12px;
      font-style:normal;
      margin:0px;
      padding:0px 10px 0px 15px;
      text-align:left;
      }
      .menu li ul a:hover, .menu li ul li:hover a{
          background:#c20000 url('hover_subnew.gif') center left no-repeat;
          border:0px;
          color:#ffffff;
          text-decoration:none;
          }
  .menu p{
      clear:left;
      }   
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm/strict.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"&gt;
  &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
  &lt;style&gt;
  body {margin:0}
  }&lt;/style&gt;
  &lt;/head&gt;
  &lt;body marginwidth="0" marginheight="0"&gt;
  &lt;center&gt;&lt;img alt="" src="Banner2011New.gif"&gt;&lt;/center&gt;
  &lt;link rel="stylesheet" type="text/css" href="menu_style2.css"&gt;
  &lt;div class="menu"&gt;
  &lt;style type="text/css"&gt;
  
   a:link {
  
   COLOR: #ffffff;
  
   }
   a:visited {
   COLOR: #ffffff;
   }&lt;/style&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a target="_self" href="home2.htm"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="viewlistings.htm"&gt;View Listings&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="aboutus2.htm"&gt;About Us&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a target="_self" href="judybio2.htm"&gt;Judy's Bio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="stevebio2.htm"&gt;Steve's Bio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="blakebio2.htm"&gt;Blake's Bio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="mavbio2.htm"&gt;Maverick's Bio&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="contact2.htm"&gt;Contact Info&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="emailus2.htm"&gt;E-Mail Us&lt;/a&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a target="_self" href="emailjudy.htm"&gt;E-Mail Judy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="emailsteve.htm"&gt;E-Mail Steve&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a target="_self" href="emailblake.htm"&gt;E-Mail Blake&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;center&gt;&amp;nbsp;&lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>A live example of the menu that I'm working with can be found at: www.judyandsteve.com/test.htm</p>
  
  <p>Thanks!</p>