✔ Aufklappmenüs

[Maik]

Hi.

hast du die Seite irgendwo online?

Da ich mir gern das menü mal anschauen würde, und die Funktion.

Erwin aka titan4e hat doch den vollständigen Quellcode gepostet, der für alle frei zum Kopieren verfügbar ist, um ihn im Browser seines Vertrauens anzuschauen.

@Topic

Setz mal dieses Stylesheet ein:

BODY TD {
FONT-SIZE: 9pt; COLOR: #4F61A6; FONT-FAMILY: Arial, sans-serif
}
#content {
BORDER-LEFT: #000000 1px solid; BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-BOTTOM: #000000 1px solid; WIDTH: 100%; BACKGROUND-COLOR: #FFFFFF
}
.MainMenu OL#MenuLinkList A:LINK, .MainMenu OL#MenuLinkList A:VISITED {
COLOR: #EEEEEE; BACKGROUND-COLOR: #4F61A6; TEXT-DECORATION: none
}
.MainMenu OL#MenuLinkList A:hover {
COLOR: #FF0000; BACKGROUND-COLOR: #4F61A6; TEXT-DECORATION: underline
}
.MainMenu OL#MenuLinkList A:active {
COLOR: #FF0000; BACKGROUND-COLOR: #4F61A6; TEXT-DECORATION: none
}
.MainMenu {
}
.MainMenu UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.MainMenu OL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 1px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.MainMenu OL LI {
FONT-SIZE: 0.9em
}
.MainMenu UL LI P {
BORDER-RIGHT: #3f3849 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #3f3849 1px solid; PADDING-LEFT: 4px; FONT-WEIGHT: bold; FONT-SIZE: 0.9em; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px; BORDER-LEFT: #3f3849 1px solid; COLOR: #ffffff; PADDING-TOP: 0px; BORDER-BOTTOM: #3f3849 1px solid; BACKGROUND-REPEAT: no-repeat; WHITE-SPACE: nowrap; HEIGHT: 15px; BACKGROUND-COLOR: #eaa500
}
.MainMenu OL {
BORDER-RIGHT: #3f3849 1px solid; BORDER-TOP: #3f3849 1px solid; MARGIN-BOTTOM: 0px; BORDER-LEFT: #3f3849 1px solid; BORDER-BOTTOM: #3f3849 1px solid; BACKGROUND-COLOR: #4F61A6
}
.MainMenu OL#MenuLinkList {
BORDER-BOTTOM-WIDTH: 0px
}
.MainMenu OL#MenuLinkList LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: #3f3849 1px solid
}
.MainMenu OL#MenuLinkList A {
PADDING-RIGHT: 4px; PADDING-LEFT: 4px; FONT-WEIGHT: bold; PADDING-BOTTOM: 4px; PADDING-TOP: 0px
}
.MainMenu OL#MenuLinkList A {
DISPLAY: block
}
.MainMenu OL#MenuLinkList .link2 {
FONT-SIZE: 9px; COLOR: #D1E0FC; LINE-HEIGHT: 8px; FONT-FAMILY: Verdana; FONT-WEIGHT: none; TEXT-DECORATION: none;
}
.MainMenu OL#MenuLinkList .link2 a:link, .MainMenu OL#MenuLinkList .link2 a:visited {
TEXT-DECORATION: none; COLOR: #D1E0FC;
}
.MainMenu OL#MenuLinkList .link2 a:hover {
COLOR: #FF0000; TEXT-DECORATION: underline;
}
.MainMenu OL#MenuLinkList .link2 a:active {
COLOR: #FF0000; TEXT-DECORATION: none;
}

und ruf anstelle der Klasse .MenuLinkList die ID #MenuLinkList im ol-Element auf:

<OL id="MenuLinkList"> ... </OL>

Das beantwortet deine ersten beiden Fragen.

Zu deiner dritten Frage: Entferne die erzwungenen Leerzeichen   vor den Linktexten, die da ebenfalls unterstrichen werden, und notiere stattdessen im Stylesheet die margin-left-Eigenschaft, um die Links einzurücken:

.MainMenu OL#MenuLinkList .link2 a:link, .MainMenu OL#MenuLinkList .link2 a:visited {
TEXT-DECORATION: none; COLOR: #D1E0FC; margin-left:20px;
}

 

[titan4e]

Jetzt funktioniert es genau so, wie ich es haben wollte. Vielen Dank Maik.

Beste Grüße und schönen Abend,
Erwin