Vertikales Menü mit Submenüs

Hallo zusammen

Ich bin neu hier und habe wohl das ganze Netz nach meinem Problem durchsucht. Leider erfolglos. Ich tue mir auch ein bisschen schwer, mein Problem zu formulieren.

Deshalb hier eine genaue Beschreibung:
Ich bin gerade dabei, mein erstes eigenes Joomla-Template zu erstellen. Vieles konnte ich mit Internet-Recherchen und mittelgrossen CSS-Vorkenntnissen bereits erreichen. Ich habe ein vertikales Mainmenü (Menüstil: Liste) erstellt und darin auch Submenüpunkte integriert. Mittels CSS konnte ich jetzt die Formatierung der einzelnen Menüpunkte gestalten, die Funktionsweise des Menüs ist allerdings noch nicht optimal.

--ALTER LINK WURDE ENTFERNT-- - Bitte schaut euch mal das Menü an. Ich möchte, dass die Hauptmenüpunkte beim hover nicht von den Submenüpunkten verdrängt werden. Ebenfalls erreiche ich momentan noch nicht, dass die jeweiligen ersten Submenüpunkte horizontal auf der gleichen Höhe stehen wie der dazugehörige Hauptmenüpunkt.

Hier das CSS:

.moduletable_menu li a {
width: 145px;
list-style-type: none;
text-indent: 5px;
background-color: #616C65;
color: #FFFFFF;
height: 18px;
margin-bottom: 6px;
padding-top: 2px;
display: block;
text-decoration: none;
}

.moduletable_menu ul li ul {
display: none;
margin-left: 106px;
}

.moduletable_menu ul li:hover ul {
display: block;
list-style-type: none;
}

.moduletable_menu ul li:hover ul li a {
width: 145px;
text-indent: 5px;
background-color: #616C65;
color: #FFFFFF;
height: 18px;
margin-bottom: 6px;
padding-top: 2px;
display: block;
text-decoration: none;
position: relative;
}

.moduletable_menu ul li:hover ul li ul li a {
display: none;
}

.moduletable_menu ul li ul li ul {
display: none;
margin-left: 106px;
}

.moduletable_menu ul li ul li:hover ul {
display: block;
list-style-type: none;
}

.moduletable_menu ul li ul li:hover ul li a {
width: 145px;
text-indent: 5px;
background-color: #616C65;
color: #FFFFFF;
height: 18px;
margin-bottom: 6px;
padding-top: 2px;
display: block;
text-decoration: none;
}

Ich habe mir die CSS-Brocken selber beigebracht, gut möglich, dass das Ganze etwas «laienhaft» aussieht. Für gute Tipps bin ich gerne offen.

Gruss

Positioniere die li der obersten Ebene mal relativ und die ul darin absolut. mit top und left rückst du sie dann an die richtige Stelle.

Danke für die schnelle Antwort. Hat ansatzweise bereits geklappt. Nur erscheinen leider die Submenüpunkte immer noch alle parallel zum obersten Hauptmenüpunkt. Wie bekomme ich den Bezug zum jeweiligen obersten li hin?

DietmarH schrieb: Positioniere die li der obersten Ebene mal relativ

..........

Funktioniert leider nicht... mein CSS sieht mittlerweile so aus...

.menu-top {
margin-left: 40px;
}

.moduletable_menu li a {
position: relative;
font-size: 12px;
width: 145px;
text-indent: 5px;
background-color: #616C65;
color: #FFFFFF;
height: 16px;
margin-bottom: 4px;
padding-top: 2px;
display: block;
text-decoration: none;
}

.moduletable_menu li.active > a {
background-color: #000000;
}

.moduletable_menu ul li ul {
display: none;
margin-left: 106px;
position: absolute;
top: 91px;
}

.moduletable_menu ul li:hover ul {
display: block;
list-style-type: none;
}

.moduletable_menu ul li:hover ul li a {
position: relative;
font-size: 12px;
width: 145px;
text-indent: 5px;
background-color: #616C65;
color: #FFFFFF;
height: 16px;
margin-bottom: 4px;
padding-top: 2px;
display: block;
text-decoration: none;
}

.moduletable_menu ul li ul li.active > a {
background-color: #000000;
}

.moduletable_menu ul li:hover ul li ul li a {
display: none;
}

.moduletable_menu ul li ul li ul {
display: none;
margin-left: 106px;
position: absolute;
top: 0px;
}

.moduletable_menu ul li ul li:hover ul {
display: block;
list-style-type: none;
}

.moduletable_menu ul li ul li:hover ul li a {
position: relative;
font-size: 12px;
width: 145px;
text-indent: 5px;
background-color: #616C65;
color: #FFFFFF;
height: 16px;
margin-bottom: 4px;
padding-top: 2px;
display: block;
text-decoration: none;
}

.moduletable_menu ul li ul li ul li.active > a {
background-color: #000000;
}

Das einzige, was mir noch fehlt, ist dieser Bezug. Wo habe ich mit diesen «Positionen» was falsch gemacht?

Cheers und danke für die Hilfe

rietberger schrieb: Funktioniert leider nicht...

Doch, funktioniert.