Navigation drop down menu
Verfasst: 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:
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
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;
}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