title: CSS how to center a menu
body: <p>I can't get a menu to be centered.  I have images, etc. that center just fine, but I can't center the menu.</p>
  
  <p>Here's some of the site's CSS that pertains to the menu:</p>
  
  <pre><code>@charset "UTF-8";
  
      /* CSS Document */
  
  #nav {
      width:975px; /* six main menu buttons at 150px per */
      margin:1 auto; /* Based on a suggestion from stackoverflow */ 
      list-style-type:none;
      text-align:center;
      position: fixed; /* used to render menu bar on top */
      top: 0; /* used to render menu bar on top */
      z-index: 1000; /* use z-index to render menu bar on top of everything, even the slideshow */
      display:inline-block;
      }
  
  #nav li {
      display:inline-block; /* used to wrap text */
      position:relative;
      float:left;
      background-color: #BDB76B; /* menu background color */;
      font-family: Arial, Helvetica, sans-serif;
      font-size:14px;
      }
  
  #nav li:hover {  /* highlights current hovered list item when hovering over the parent menu */
      background-color:#BDB76B;
      font-weight:500;
      color:blue;
  }
  
  #nav li a {
      display:inline-block; /* used to wrap text */
      margin:5px 0; /*space between menu elements */
      text-decoration:none;
      width:150px; /* this is the width of the menu items */
      line-height:15px; /* this is the text height of the menu items */
      color:#000000; /* list item font color 000=black, FFF=white*/
      }
  
  #nav li a:hover {  /* highlights hovered item of the parent menu */
      background-color:#BDB76B;
      font-weight:500;
      color:blue;
      font-size:18px;
      width:225px;
  }
  
  #nav li li a { /* smaller font size for sub menu items */
      font-size:90%;
      background-color: #BDB76B; /* menu background color for submenues */
  } 
  
  #nav li li a:hover {  /* highlights current hovered list when hovering over sub menues */
      background-color:#BDB76B;
      font-weight:500;
      color:blue;
      font-size:120%;
      width:200px;
  }
  
  /*--- Sublist Styles ---*/
  #nav ul {
      position:absolute;
      padding:0;
      left:0;
      display:none; /* hides sublists */
      }
  
  #nav li:hover ul ul {
      display:none;
  } /* hides sub-sublists */
  
  #nav li:hover ul {
      display:block;
  } /* shows sublist on hover */
  
  #nav li:hover ul ul ul {
      display:none;
  } /* hides sub-sub-sublists */
  
  #nav li li:hover ul {
      display:block; /* shows sub-sublist on hover */
      margin-left:150px; /* this should be the same width as the parent list item */
      margin-top:-35px; /* aligns top of sub menu with top of list item */
      }
  
  #nav li li li:hover ul {
      display:block; /* shows sub-sub-sublist on hover */
      margin-left:150px; /* this should be the same width as the parent list item */
      margin-top:-35px; /* aligns top of sub menu with top of list item */
      width:200px;
      }
  
  .upcoming_events_list li { /* attributes for the upcoming_events list level */
      /* CSS to alter the links in the include list when inside the div */
      width: 380px;
      text-align: left;
      list-style-type:circle;
      color:blue;
  }
  
  .upcoming_events_list li a:link { /* attributes for the upcoming_events unvisited */
      font-family: "Times New Roman", Times, serif;
      color: black;
      font-size: 18px;
      font-weight: 300;
      list-style-type: circle;
  }
  
  .upcoming_events_list li a:visited { /* attributes for the upcoming_events visited */
      font-family: "Times New Roman", Times, serif;
      color: blue;
      font-size: 18px;
      font-weight: 100;
      list-style-type: circle;
  
  }
  
  .upcoming_events_list li a:hover { /* attributes for the upcoming_events hover */
      font-family: "Times New Roman", Times, serif;
      font-size: 20px;
      font-weight: 500;
  }
  
  .upcoming_events_list li a:active { /* attributes for the upcoming_events selected */
      font-family: "Times New Roman", Times, serif;
      font-size: 20px;
      font-weight: 500;
      text-decoration: underline;
  }
  </code></pre>
  
  <p>Here's a subset of the site's index.shtml:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;!-- InstanceBegin template="/Templates/ss_template_1.dwt" codeOutsideHTMLIsLocked="false" --&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;!-- InstanceBeginEditable name="Page_Specific_Title" --&gt;
      &lt;title&gt;My Site Home Page SHTML&lt;/title&gt;
      &lt;!-- InstanceEndEditable --&gt;
      &lt;link href="CSS/MySite.css" rel="stylesheet" type="text/css" /&gt;
      &lt;style type="text/css"&gt;
      &lt;!--
      body {
          background-color: #EEE8AA;
           }
      --&gt;
      &lt;/style&gt;
      &lt;!-- InstanceBeginEditable name="Page_Specific_Head" --&gt;
  &lt;!-- include jQuery library --&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- include Cycle plugin --&gt;
      &lt;script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $('.slideshow').cycle({
                  fx:         'shuffle',  // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                  speed:      1500,       // speed at which the transition occurs (in miliseconds)
                  delay:      1000,       // time spent on the first slide before starting the slideshow
                  continuous: 0,          // true (1) to start next transition immediately after current one completes
                  timeout:    9000        // time spent on each slide
              });
          });
      &lt;/script&gt;
      &lt;style type="text/css"&gt;
      &lt;!--
      p {margin:0; padding:0}
      --&gt;
      &lt;/style&gt;
      &lt;meta name="description" content="A warm welcome to all. We invite everyone to participate in all aspects of our
      parish life."/&gt;
      &lt;meta name="keywords" content="parish,church,welcome,all are welcome,spiritual,peace,justice"/&gt;
  &lt;!-- InstanceEndEditable --&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!-- InstanceBeginEditable name="Page_Specific_Body" --&gt;
  &lt;br /&gt;
  &lt;div&gt;
  &lt;?php include("menu_primary1.shtml");
  ?&gt;
  &lt;/div&gt;
  &lt;div class="block_center_1000_text_left"&gt;
      &lt;!-- The title was created using the Pristina Regular 36 point font.  The background color code is D3AC25--&gt;
      &lt;p align="center"&gt;
          &lt;img src="images/front_page_title.jpg" alt="Parish Site"/&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="outer_width_1000" &gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and here's a subset of the included file menu_primary1.shtml:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Faith Formation&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="adult_faith_formation.shtml"&gt;Adult Faith Formation&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="Attachments/RelEdGrades1to5Schedule.pdf" target="_blank"&gt;Youth Faith Formation Grades 1 to 5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="Attachments/RelEdGrades6to8Schedule.pdf" target="_blank"&gt;Youth Faith Formation Grades 6 to 8&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="Attachments/ConfirmationPreparation.pdf" target="_blank"&gt;Confirmation Preparation&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Parish Groups&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="Attachments/ChurchGroupsListing.pdf" target="_blank"&gt;Listing of Groups and Ministries&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="good_art_series.shtml"&gt;Good Art Series&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="contact_us.shtml#peace"&gt;Peace and Justice Outreach&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="svdp.shtml"&gt;Saint Vincent de Paul&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Upcoming Events&lt;/a&gt;
        &lt;?php include("menu_upcoming_events1.shtml");
        ?&gt;
        &lt;/li&gt;
  ... Three other top-level &lt;li&gt; menu items
  &lt;/ul&gt;
  </code></pre>
  
  <p>Thanks for your help.</p>