Dropdown mit CSS

[taikonaut]

Hallo,
ich versuche mittels einer ungeordneten Liste ein horizontales Navigationsmenü zu realisieren. Die Lösung ist ja bekannt, aber das funktioniert nicht, wenn man wie ich für Menüpunkt A und B nochmals eine ungeordnete Liste einfügt. Das Ziel ist das <li >Menüpunkt A und <li>Menüpunkt B horizontal angeordnet werden. Wäre für einen Tipp dankbar.

<ul id="navlist">
<li >Menüpunkt A
<ul >
<li><a href="#">Unterpunkt A</a></li>
<li><a href="#">Unterpunkt B</a></li>
</ul>
</li>

<li>Menüpunkt B
<ul >
<li><a href="#">Unterpunkt A</a></li>
<li><a href="#">Unterpunkt B</a></li>
</ul>
</li>
</ul>

CSS:
#navlist li{
display:inline;
list-style:none;
}

 

[Sven Mintel]

Mmmh...ich versteh jetzt nicht, wo das Problem ist.

Wenn du das "display:inline" wegnimmst, sollte doch alles so sein, wie du es beschrieben hast.

Vielleicht hab ichs aber auch falsch verstanden... zeig doch mal anhand ner Grafik, wie das werden soll.

 

[taikonaut]

Hallo fatalus,

das soll grafisch so aussehen :

Menüpunkt A Menüpunkt B
Unterpunkt A Unterpunkt A
Unterpunkt B Unterpunkt B


Also Menüpunkt A und B auf einer Horizontalen. Deswegen habe ich diplay: inline verwendet. Dies wirkt sich allerdings nur auf die inneren Listenpunkte aus. Die Menüpunkte A und B bleiben auf einer Vertikalen.
Na, ob man das jetzt nachvollziehen kann ?


Gruss

 

[BugsBastard]

Hi Taiko,

dann mach das doch ganz einfach und lege die Listen in eine eigene Tabelle. Also:
<table>
<tr>
<td>
<ul><li>Menuepunkt A <ul><li>Unterpunkt A</li><li>Unterpunkt B</li></ul></li></ul>
</td>
<td>
<ul><li>Menuepunkt B <ul><li>Unterpunkt A</li><li>Unterpunkt B</li></ul></li></ul>
</td>

Gruss,

Bugs