✔ Menütext steht leicht versetzt

[tombe]

Hallo Leute,

ich hab mir mit einer Mischung aus JavaScript und CSS ein Menü erstellt. Das Menü hat insgesamt 9 Links, von denen 1 herunterklappt (und 2 weitere Links anzeigt) wenn man mit der Maus darüber ist.

Genau dieser macht Probleme. Er steht nämlich im Verhältnis zu den anderen ein bisschen weiter unten.

Hier ist mal der Code :

<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="10%" nowrap>
<ul id="nav">
  <li><a class="MenueLink" href="suche_adresse.php">Adressensuche</a>
<ul>
  <li><a class="MenueLink" href="suche_adresse.php">- Erweiterte Suche</a>
  <li><a class="MenueLink" href="suche_branchenliste.php">- Branchensuche</a>
</ul>
</ul>
</td>
<td width="10%" nowrap><a class="MenueLink" produkte.php">Produktsuche</a></td>
<td width="10%" nowrap><a class="MenueLink" href="anmelden.php">Verwaltung</a></td>
<td width="10%" nowrap><a class="MenueLink" href="anmeldung.php">Anmeldung</a></td>
<td width="10%" nowrap><a class="MenueLink" href="findit.php">find-it24</a></td>
<td width="10%" nowrap><a class="MenueLink" href="newsletter.php">Newsletter</a></td>
<td width="10%" nowrap><a class="MenueLink" href="sitemap.php">Sitemap</a></td>
<td width="10%" nowrap><a class="MenueLink" href="kontakt.php">Kontakt</a></td>
<td width="10%" nowrap><a class="MenueLink" href="agb.php">AGB</a></td>
</tr>
</table>

Und das hier die CSS Angaben :

body { font-family: arial, helvetica, serif; }
#nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 2; }
#nav a { display: block; width: 8em; }
#nav li { float: left; width: 8em; }
#nav li ul { position: absolute; background-color: FFCC33; width: 10em; left: -999em; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
#content { clear: left; color: #ccc; }

Im Original könnt Ihr es auch unter www.find-it24.de anschauen.

Hat jemand von Euch eine Idee woran das liegt?

Danke

Thomas

 

[Maik]

In der verschachtelten Liste fehlen die schliessenden </li>-Tags:

<ul id="nav">
  <li><a class="MenueLink" href="suche_adresse.php">Adressensuche</a>
    <ul>
      <li><a class="MenueLink" href="suche_adresse.php">- Erweiterte Suche</a></li>
      <li><a class="MenueLink" href="suche_branchenliste.php">- Branchensuche</a></li>
    </ul>
 </li>
</ul>

Dem Wert für die line-height-Eigenschaft sollte eine Einheit hinzugefügt werden. Zudem erscheinen mir die 2 (Pixel) als Zeilenhöhe etwas zu klein gewählt. Vielleicht sollen es 20 Pixel sein?

 

[Maik]

Probier mal Folgendes:

#nav li ul { 
position: absolute; 
margin-top: 5px;
background-color: FFCC33; 
width: 10em; 
left: -999em; 
}

 

[tombe]

Hi,

danke für die Tipps. Werde es gleich mal testen.

Thomas