Css drop down menu wont center

1

i have a pretty neat css drop down menu i am using, but i cant get the dam thing centered. here’s the source for the menu:

ul#nav {
            background: #fff;
            background-image: url(null);
          margin: 0 auto;
          border: 0;
          padding: 10;
            font-weight: bolder;
          width: 100%; /*For KHTML*/
          list-style: inline;
            table-layout: fixed;
          height: 24px;
}

     ul#nav li {
          margin: 0;
          border: 0;
          padding: 10;
          float: left; /*For Gecko*/
          display: inline;
          list-style: none;
          position: relative;
          height: 24px;
}

     ul#nav ul {
          margin: 0;
          border: 0;
          padding: 10;
          width: 100%;
          list-style: none;
          display: none;
          position: absolute;
          top: 24px;
          left: 0;
}

     ul#nav ul:after /*From IE 7 lack of compliance*/{
          clear: both;
          display: block;
          font: 1px/0px serif;
          content: ".";
          height: 0;
          visibility: hidden;
}

     ul#nav ul li {
          width: 160px;
          float: left; /*For IE 7 lack of compliance*/
          display: block !important;
          display: inline; /*For IE*/
}

/* Base Menu */
    ul#nav a {
          border: 1px solid #FFF;
          border-right-color: #CCC;
          border-bottom-color: #fff;
          padding: 0 6px;
          float: none !important; /*For Opera*/
          float: left; /*For IE*/
          display: block;
          background: #fff;
          color: #666;
          font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
          text-decoration: none;
          height: auto !important;
          height: 1%; /*For IE*/
}

/* Base Menu Hover */
    ul#nav a:hover,
    ul#nav li:hover a,
    ul#nav li.iehover a {
          background: #CCC;
          color: #333366;
}

/* Second Menu */
    ul#nav li:hover li a,
  ul#nav li.iehover li a {
          float: none;
          background: #EEE;
          color: #686868;
}

/* Second Menu Hover */
     ul#nav li:hover li a:hover,
     ul#nav li:hover li:hover a,
     ul#nav li.iehover li a:hover,
     ul#nav li.iehover li.iehover a {
           background: #A8A8A8;
          color: #FFF;
}

/* Third Menu */
     ul#nav li:hover li:hover li a,
     ul#nav li.iehover li.iehover li a {
           background: #EEE;
          color: #686868;
}

/* Third Menu Hover */
     ul#nav li:hover li:hover li a:hover,
     ul#nav li:hover li:hover li:hover a,
     ul#nav li.iehover li.iehover li a:hover,
     ul#nav li.iehover li.iehover li.iehover a {
           background: #CCC;
          color: #FFF;
}

/* Fourth Menu */
     ul#nav li:hover li:hover li:hover li a,
     ul#nav li.iehover li.iehover li.iehover li a {
           background: #EEE;
          color: #D9D9D9;
}

/* Fourth Menu Hover */
     ul#nav li:hover li:hover li:hover li a:hover,
     ul#nav li.iehover li.iehover li.iehover li a:hover {
           background: #CCC;
          color: #FFF;
}

     ul#nav ul ul,
    ul#nav ul ul ul {
          display: none;
          position: absolute;
          top: 0;
          left: 160px;
}

/* PERMANENET */
     ul#nav li:hover ul ul,
     ul#nav li:hover ul ul ul,
     ul#nav li.iehover ul ul,
     ul#nav li.iehover ul ul ul {
           display: none;
}

      ul#nav li:hover ul,
     ul#nav ul li:hover ul,
   ul#nav ul ul li:hover ul,
     ul#nav li.iehover ul,
     ul#nav ul li.iehover ul,
     ul#nav ul ul li.iehover ul {
          display: block;
}

ive tried a bunch of different things but nothing works so far. heres my html code:

<!-- START nav -->
    <div id="nav">
        <ul id="nav">
                
                <li><a href="/index.html">About Us</a>
                </li>
                
                <li><a href="/capital.html">Capital</a> 
                <ul>  
                <li><a href="/mission.html">Our Mission</a></li>
                <li><a href="/advantage.html">The SPCG Advantage</a></li>
                </ul> 
                </li>
                
                <li><a href="/services.html">Capabilities</a>
                </li>
                
                <li><a href="/fmessage.html">Founder's Message</a> 
                <ul>  
                <li><a href="/approach.html">Our Approach</a></li>
                <li><a href="/captools.html">Capital and the Right Tools</a></li>
                </ul> 
                </li>
                
                <li><a href="/focus.html">Focus</a> 
                <ul> 
                <li><a href="/investors.html">Investors</a></li> 
                <li><a href="/privfin.html">Private Financing</a></li>
                <li><a href="/corpfin.html">Corporate Finance</a></li>
                <li><a href="/busrev.html">Business Revitalization</a></li>
                </ul> 
                </li>
                
                <li><a href="/resources.html">Resources</a>
                <ul> 
                <li><a href="/execpartners.html">Executive Partners Program</a></li> 
                <li><a href="/specialsopp.html">Special Situation Opportunities</a></li>
                </ul>
                </li>
                
                <li><a href="/contact.php">Contact</a>
                </li>
                 
                </ul> 

    </div> <!-- END nav -->
2

I’ll check this out, but for one, you have 2 items with the exact same ID (#nav)…

3

also in linux, this nav bar appears under a swf i am using. i already changed wmode to opaque but it seems to not do the trick in linux.

btw, if i remove that second id, it doesnt look like how i want it.