Zum Inhalt springen

waagerechtes Dropdown-Menue mit CSS


SteffiMichi

Empfohlene Beiträge

Hallo wiedermal :-)

Ich bin gerade dabei ein waagerechtes Dropdownmenue mit CSS zu erstellen. Habe es schon soweit geschafft, dass die erste Ebene waagerecht dargestellt wird. Jetzt fehlt "nur" noch die Aufklappbare 2. Ebene.

Habe dieses Tutorial gefunden: Dropdown Menü - Ein barrierefreies Typo3-Menü erstellen | mortox.de

allerdings ist mir das CSS etwas suspekt (weil ich (noch) nicht allzu firm darin bin).

Hier mal mein bisheriger Code, der folgendes Layout erzeugt:

Level 1.1 (onmouseover: farbig) Level 1.2 (") Level 1.3 (") usw...


#top-menu2 {

	position: relative;

	height: 20px;

	background: #FFFFFF;

	margin: 0px;

	padding-bottom: 8px;

}


#top-menu2 ul {

	list-style: none;

	margin: 0;

	padding: 0;

}


#top-menu2 ul a, #top-menu2 ul .cur {

	float: left; 

	display: block;

	line-height: 20px;

	text-decoration: none;

	font-size: 11px;

	font-weight: bold;

	background-color: #ededed; 

	border-right-width: 0px;

	border-right-style: solid;

	border-right-color: #FFFFFF;

	padding: 0 12px;

	margin: 0;

	color: #000000;

}


#top-menu2 ul a:hover, #top-menu2 ul .act a {

	color: #FFFFFF;

	background-color: #AB1315;

	font-size: 11px;

	font-weight: bold;

}


#top-menu2 li {

	float: left; 

	padding: 0;

	margin: 0;

}  


Waere nett, wenn ein faehiger CSSler mir einen Tipp geben koennte!

Danke!

Stefan

Link zu diesem Kommentar
Auf anderen Seiten teilen

Also das Stylesheet, was ich mitgeschickt habe, stellt das Menü schonmal waagerecht dar. Ich würde nun gerne wissen, wie ich, basierend auf diesem Stylesheet, die nächste Ebene als Dropdown-Liste darstellen kann. Also genauer, wie ich die ui und li-Elemente der nächsten Ebene formatieren muss. Einfach das CSS aus dem Tutorial zu übernehmen geht nicht, da meins schon zu "anders" aufgebaut ist. Ein Versuch, einfach die Bezeichner zu ändern, schlug fehl... Deshalb muss ich "selber bauen".

War das präzise genug? Wäre für Hilfe echt dankbar!

Gruß Stefan

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...