Problem bei der Zentrierung von horizonaler Navigation/Menü

[Disk Rhode]

Liebe Profis,

ich möchte eine horizontale Navigation erstellen und bin am verzweifeln bei der Darstellung an verschiedenen Browsern. Als Anfänger, der sich durch Codeschnipsel studieren und Selfhtml Forum lesen weiterbilde, komme ich hier nicht mehr weiter und nutze erstmals das Forum.

<div class="header">
  <div id="logo">
    <a href="./index.php?id=36"><img src="fileadmin/template/logo.jpg" alt="" border="0" width="195" height="71" /></a>
  </div>
  <div class="mainNavi">
    <ul class="top-bar">
      <li class="top-bar-no"><a href="index.php?id=35">TOP1</a></li>
      <li class="top-bar-act"><a href="index.php?id=39">TOP2</a>
        <ul class="sub-bar">
          <li class="sub-bar-no"><a href="index.php?id=42">SUB1</a></li>
          <li class="sub-bar-no"><a href="index.php?id=55">SUB2</a></li>
          <li class="sub-bar-act"><strong><a href="index.php?id=58">SUB3</a></strong>
            <ul class="sub-sub-bar">
              <li class="sub-sub-bar-no"><a href="index.php?id=104">SUBSUB1</a></li>
              <li class="sub-sub-bar-no"><a href="index.php?id=106">SUBSUB2</a></li>
              <li class="sub-sub-bar-no"><a href="index.php?id=108">SUBSUB3</a></li>
            </ul>
          </li>
          <li class="sub-bar-no"><a href="index.php?id=43">SUB3</a></li>
        </ul>
      </li>
      <li class="top-bar-no"><a href="index.php?id=47">TOP3</a></li>
      <li class="top-bar-no"><a href="index.php?id=37">TOP4</a></li>
    </ul>
  </div>
</div>

Der CSS Code dazu:

.header {
    height: 115px;
    background: #fff none repeat scroll 0 0;
    margin-top: 15px;
    width: 800px;
    float: left;
}
div#logo {
float:left;
margin: 4px 0 0 0;
}
.mainNavi {
     position: relative;
     font-size: 13px;
     width: 603px;
     float: left;
     height: 80px;
     display: table;
}
.mainNavi ul {
     margin: 0 auto;
     list-style: none;
     text-align: center;

}
.mainNavi ul ul {
     position: absolute;
     float: left;
     display: table;
}
.mainNavi ul li {
         display: inline-block;
}
.mainNavi a {
     display: block;
     margin-left: 35px;
}
.top-bar {
     text-transform: uppercase;
     display: table;
     background: #fff none repeat scroll 0 0;
     line-height: 25px;
}
.top-bar a {
    background: #fff none repeat scroll 0 0;
    color: #424242;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 3px;
    line-height: 28px;
    text-transform: uppercase;
}
.top-bar-act a {
    background: #fff none repeat scroll 0 0;
    color: #dddd00;
}
.top-bar-act ul {
width: 100%;
/*text-align: right; */
clear:left;
position:relative;
right:0%;
}
.top-bar a:hover {
    text-decoration: underline;
}
.sub-bar a {
    font-size: 13px;
    font-weight: 300;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    display: inline;
    margin-left: 23px;
}

.sub-bar-act a {
    color: #dddd00;
}
.sub-bar-act ul {
width: 550px;
text-align: center;
clear:left;
position:relative;
left:0%;
line-height:16px;
}
.sub-bar a:hover {
    text-decoration: underline;
}

.sub-sub-bar a {
    font-size: 12px;
    font-weight: 0;
    text-decoration: none;
    text-transform: none;
    display: inline;
    color: #000;
    margin-left: 20px;
    line-height:16px;
}
.sub-sub-bar-act a {
    color: #dddd00;
}
.sub-sub-bar-act li {
         display: inline-block;
}
.sub-sub-bar a:hover {
    text-decoration: underline;
}
.sub-bar ul li {
 margin: 0 auto;
}

Ich bin mir sicher, es geht einfacher! Aber immer wenn ich mit Firefox / Firebug den Code ändere, zerlegt es alles weitere. Würde mich sehr freuen, wenn ihr ein paar Minuten von Eurem kostbaren Wochenende diesem Projekt widmen könntet. Es befindet sich momentan noch auf meinem localhost. Herzlichen Dank.