Hallo,
ich hoffe, ihr könnt mir helfen 
Daran arbeite ich grad:
Ich habe ein HTML-Template für Joomla erstellt und habe dort eine horizontale Navigation mittels ungeordneten Listenpunkten hergestellt. Zu diesen Hauptmenüpunkten sind Unterlisten erstellt, die auf weitere Seiten verweisen sollen. Direkt nach dem Navigations-Container (#navigation) folgt ein weiterer DIV-Container für ein Slideshow-Plugin. Beide Container sind fix mit Breite und Höhe verankert. Das Problem an der Sache ist, dass zwar IDs für die Menüpunkte erstellt werden, diese sich aber jederzeit ändern könnten.
Ich habe das Layout soweit mit CSS fixiert, allerdings passiert was eigenartiges: sobald ich mittels Hover über einen horizontalen Hauptmenüpunkt gehe, erscheinen zwar die enthaltenen (vertikalen) Unterpunkte, aber stets unter dem ersten Menüpunkt; langsam bin ich ratlos.
Ich habe einen Auszug aus der generierten Joomla-HTML (stark gekürzt), es wird folgender Beispielcode für die Menüstruktur ausgeworfen:
\<li class="item-101 current active"\>\<a href="/web/"\>Home\</a\>\</li\>
\<li class="item-108 deeper parent"\>\<a href="/web/index.php/haupteintrag-1"\>Haupteintrag 1\</a\>
\<ul class="nav-child unstyled small"\>
\<li class="item-112"\>\<a href="/web/index.php?Itemid=112"\>Sub 1-1\</a\>\</li\>
\<li class="item-113"\>\<a href="/web/index.php?Itemid=113"\>Sub 1-2\</a\>\</li\>
\</ul\>
\</li\>
\<li class="item-109 deeper parent"\>\<a href="/web/index.php/haupteintrag-2"\>Haupteintrag 2\</a\>
\<ul class="nav-child unstyled small"\>
\<li class="item-114"\>\<a href="/web/index.php?Itemid=114"\>Sub 2-1\</a\>\</li\>
\<li class="item-115"\>\<a href="/web/index.php?Itemid=115"\>Sub 2-2\</a\>\</li\>
\<li class="item-116"\>\<a href="/web/index.php?Itemid=116"\>Sub 2-3\</a\>\</li\>
\</ul\>
\</li\>
\<li class="item-110 deeper parent"\>\<a href="/web/index.php/haupteintrag-3"\>Haupteintrag 3\</a\>
\<ul class="nav-child unstyled small"\>
\<li class="item-117"\>\<a href="/web/index.php?Itemid=117"\>Sub 3-1\</a\>\</li\>
\<li class="item-118"\>\<a href="/web/index.php?Itemid=118"\>Sub 3-2\</a\>\</li\>
\<li class="item-119"\>\<a href="/web/index.php?Itemid=119"\>Sub 3-3\</a\>\</li\>
\<li class="item-120"\>\<a href="/web/index.php?Itemid=120"\>Sub 3-4\</a\>\</li\>
\</ul\>
\</li\>
Momentan habe ich folgende Einstellungen in der CSS eingetragen: (gekürzter Auszug aus der Navigations-Konfiguration; #navigation entspricht dem Container):
#navigation {
width: 980px;
height: 40px;
float: left;
background: #223344;
}
#navigation \*{
list-style: none;
}
#navigation li{
position: relative;
}
#navigation li a, li:visited a{
float: left;
color: #eeeeee;
text-decoration: none;
display: block;
width: 153px;
line-height: 40px;
text-align: center;
border-left: 1px solid #666666;
border-right: 1px solid #CCCCCC;
}
#navigation li:hover a{
float: left;
color: #111111;
background-color: #eeeeee;
text-decoration: none;
display: block;
width: 153px;
line-height: 40px;
text-align: center;
border-left: 1px solid #666666;
border-right: 1px solid #CCCCCC;
}
/\* Unterebene der Navigation: \*/
#navigation ul ul{
position: absolute;
z-index: 500;
top: 40px;
width: 153px;
float: none;
}
#navigation ul ul li a, ul ul li a:visited{
float: none;
color: #eeeeee;
text-decoration: none;
width: 153px;
line-height: 40px;
text-align: center;
border-left: 1px solid #666666;
border-right: 1px solid #CCCCCC;
background: #223344;
}
#navigation ul ul li:hover a, ul ul li:active{
float: none;
color: #111111;
background-color: #eeeeee;
text-decoration: none;
width: 153px;
line-height: 40px;
text-align: center;
border-left: 1px solid #666666;
border-right: 1px solid #CCCCCC;
}
div#navigation ul ul,
div#navigation ul li:hover ul ul,
div#navigation ul ul li:hover ul ul
{display: none;}
div#navigation ul li:hover ul,
div#navigation ul ul li:hover ul,
div#navigation ul ul ul li:hover ul
{display: block;}
Vermutlich ist die Lösung recht einfach, aber ich seh’s einfach nicht… wie kann ich im CSS definieren, dass der vertikal anzuzeigende Untermenüpunkt direkt unter dem horizontalen Hauptmenüpunkt erscheint?
Mit Firebug hab ich schon ein wenig rumexperimentiert, leider kam ich da auch auf keinen grünen Zweig. Das Projekt liegt im Moment auf meinem lokalen Webserver, daher kann ich euch leider keinen Link zur Seite geben. Sollte das ein Problem sein, gebt mir das bitte einfach bekannt, dann versuche ich diese auf meinen Webspace hochzuladen.
Vielleicht hatte einer von euch ja schon ein ähnliches Problem und kann mir weiterhelfen.
Danke für Eure Tipps im Voraus,
LG
MtB1980
)