Navigation drop down menu

Fragen zur Installation von CONTENIDO 4.9? Probleme bei der Konfiguration? Hinweise oder Fragen zur Entwicklung des Systemes oder zur Sicherheit?
Antworten
ulides
Beiträge: 34
Registriert: Mi 4. Mai 2016, 14:51
Kontaktdaten:

Navigation drop down menu

Beitrag von ulides » Mo 4. Jul 2016, 13:25

Hallo,
die Hauptnavigation soll bei mir ein Drop down Menu werden. Dazu habe ich die navigation_main und die main.css umgebaut, habe aber so einige Probleme.
1. meine CSS Werte werden nicht gelesen/verwendet: die Klasse ".navigation" ist im Inspektor in Firefox zu sehen, aber keine der Angaben werden angezeigt und oder angewendet
Hier der Code:

Code: Alles auswählen

/* ----- MENU ----- */

#menu {
margin:0 auto;
width:auto;
}


#menu .navigation ul
{
	list-style: none;
	position: relative;
	float: left;
	margin: 0;
	padding: 0
}

#menu .navigation ul a
{
	display: block;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	line-height: 32px;
	padding: 0 15px;
	font-family: "Open Sans",Helvetica,Arial,sans-serif;
	color: #003366;
}

#menu .navigation ul a:hover {
color: #625eac;
}

#menu .navigation ul li
{
	position:relative;
	float:left;
	margin: 0;
	padding:0
}

#menu .navigation ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0 0 0 15px;
}

#menu .navigation ul ul li
{
	float:none;
	width:156px
}

#menu .navigation ul ul a
{
	line-height:120%;
	padding:10px 15px 10px 15px;
	text-align:left;
}

#menu .navigation ul ul ul
{
	top:0;
	left:100%;
	padding:0;
	margin-left:-12px;
	z-index:10;
}

#menu .navigation ul li:hover > ul
{
	display:block
}
.home {
background:url(../upload/bg_home.png);
width: 120px;
height: 34px;
}
.schulhaus {
background:url(../upload/bg_Schulhaus.png);
width: 123px;
height: 34px;
}
.konzept {
background:url(../upload/bg_Konzept.png);
width: 122px;
height: 34px;
}
.schulaufnahme {
background:url(../upload/bg_Schulaufnahme.png);
width: 161px;
height: 34px;
}
.verwaltung {
background:url(../upload/bg_Verwaltung.png);
width: 148px;
height: 34px;
}
.kontakt {
background:url(../upload/bg_Kont-Impress.png);
width: 193px;
height: 34px;
}
.suche {
background:url(../upload/bg_Suche.png);
width: 155px;
height: 34px;
}
#menu ul li.homeddm {
background-color:#FCED97;
border-top: solid  #CC6633;

}
#menu ul ul li.homeddform {
background-color: #fcf9d2;
border-top: solid  #CC6633;
padding-left: 6px:
}
#menu ul li.schulhausddm {
background-color:#d85d38;
border-top: solid  #c3ab12;

}
#menu ul li.konzeptddm {
background-color:#dee5f0; 
border-top: solid  #91338a;
}
#menu ul li.schulaufnahmeddm {
background-color:#f6e8cd; 
border-top: solid  #9c4f5c;
}
#menu ul li.verwaltungddm {
background-color:#ca569d;
border-top: solid  #57299b;
}
Aussehen soll es so: http://www.ulidesign.net/franz/franzhom ... ation.html. Ideal wäre es, wenn ich die CSS-Navigation so übernehmen könnte.

2. Dann taucht eine weitere Frage auf: wie bekomme ich die Subnavigation (fly out menus) in das navigation_main Modul? Also, wie kann ich die Klassen des CSS auf die Untermenüpunkte anwenden?

HTML und CSS verstehe ich; bei php bin ich der absolute Neuling. Ich probiere schon LANGE an den Problem herum, habe das Forum gründlich durchsucht, aber nichts zu meinem Problem gefunden. Weiß jemand Hilfe?! Da wär ich echt dankbar!

Uli

Antworten