Anfänger: Probleme mit horiziontalem Menü, 1.Ebene GMENU

Hallo liebe Community!

Ich bin neu hier, daher stelle ich mich erst einmal vor:

Ich bin der Christoph, knapp 40 und als Quereinsteiger über den Umweg des technischen Redakteurs zum Webdesign gekommen. Typo3 habe ich gelernt, HTML und CSS habe ich mir über Jahre notgedrungenermassen diletantisch selbst beigebracht. Dass ich da auch nochmal die Schulbank drücken muss, ist mir klar.

Da ich mich auf meine zukünftige Aufgaben vorbereiten will, baue ich grade eine Musterseite mit vielen Redakteurszugängen (Fussballverein).
Das klappt auch alles ganz gut.
Mein Problem ist ein horizontales Menü, in dem ich die 1. Ebene in 6 gleichgroßen Bilddateien wiedergeben (160x20Px) möchte mit GMENU.
Die zweite und dritte Ebene laufen, nur die erste macht Probleme.
Hier die Snippets:

HTML-Code:

---

<div id="wrap">


  <div id="head">

    <div id="header"><div id="logo">###LOGO### <div id="schrift">###SCHRIFT### </div> </div>
                   
                   
      <div id="nav">  ###NAVIGATION### </div>           
    </div>
  </div>
 

  <div id="main">
                <div id="content">

                    <div id="mitte">###MITTE###</div>
                    <div id="rechts">###RECHTS###</div>
                </div>
   
  </div>

  <div id="foot">
 
                <div id="footer">
                    <div id="footermenu">###FOOTERMENU###</div>
                </div>
 
  </div>

</div>

---

CSS:

Code:

---

#navigation {
  height:20px;
  width:960px;
  margin: 0px auto;
  margin-top: 5px;
  }



#nav, #nav ul {
  margin: 0px auto;
  float: left;
  width: 960 px;
  list-style: none;
  /*Höhe Versatz nach unten*/
  line-height: 1em;
  background-image: url(../images/menuback1.jpg no-repeat);
  padding: 0;
  height:20px;
  width:960px;
}
 
#nav li li {
  background:gainsboro;
  border-bottom:1px solid #000000;
}
 
#nav a {
  display: block;
  xwidth: 15em;
  color: #000000;
  text-decoration: none;
  padding: 0.2em 0em;
}
 
#nav a.menuparent  {
  background: url(pfeil.gif) no-repeat 90% 40%;
}
 
#nav li {
  float: left;
  padding: 0;
}
 
#nav ul li a {
  color: #000000;
  font-size:11px;
  font-weight:bold;
}
 
#nav li ul {
  position: absolute;
  left: -999em;
  height: auto;
  width: 14em;
  font-weight: normal;
  margin: 0;
}
 
#nav li li {
  width: 15em;
}
 
#nav li ul a {
}
 
#nav li ul ul {
  margin: -1.45em 0 0 14em !important;
  margin: -1.45em 0 0 14.45em ;
}
 
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
  left: -999em;
}
 
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
  left: auto;
}
 
#nav li li:hover, #nav li li.sfhover {
  background: gainsboro;
}
 
#nav li li {
  background: gainsboro;
}
 
#nav li li a {
  padding-left:5px;
}
 
#nav li ul  {
  background-image: none;
}

---

Typoscript

Code:

---

## erforderlich für RO bei Version 6.2 da RO in 6.2 zerschossen ist
page.jsInline.10 = TEXT
page.jsInline.10.value = var version = "n3";

lib.navigation = HMENU
lib.navigation {
  special = directory
  special.value = 1
  wrap = <ul>|</ul>
  excludeUidList = 9,24
   
  1=GMENU
  1 {
    wrap = <ul id="nav">|</ul>
    expAll = 1
    noBlur = 1

    NO = 1   
    NO {
      allWrap = <li>|</li>
      transparentBackground = 1

      XY = 160,20

      5 = IMAGE
      5.file = fileadmin/images/menuback1.jpg
   
      10=TEXT
      10 {
        text.field=title
        offset=10,15
        ##align=center
        fontColor = #000000
        fontFile=fileadmin/fonts/dejavusans.ttf
        fontSize=10     
      }
    }
    RO <.NO
    RO.5.file = fileadmin/images/menuback2.jpg

    ACT <.RO

    IFSUB <.NO
    IFSUB.allWrap =  <li class="menuparent">|

    ACTIFSUB <.RO
    ACTIFSUB.allWrap =  <li class="menuparent">|

    ACTRO <.RO
    ACTIFSUBRO <.RO
   
    IFSUBRO <.ACTIFSUBRO
  }
  2 = TMENU
  2 {
    wrap  = <ul>|</ul></li>
    expAll = 1
    noBlur = 1

    NO = 1 
    NO.allWrap = <li>|</li>

    ACT <.NO
    ACT.allWrap = <li class="nav2act"> |</li>

    IFSUB = 1
    IFSUB.allWrap =  <li class="menuparent">|

    ACTIFSUB = 1
    ACTIFSUB.allWrap =  <li class="menuparent">|
  }
  3 <.2}

---

Vielen Dank im Voraus für die Geduld und Hilfe!

Gruß
Christoph

Anfänger: Probleme mit horiziontalem Menü, 1.Ebene GMENU