Ich hab mal etwas aufgeräumt und umgebaut; paddding und pfeil auf das <a> gelegt und beides für die zweite Ebene wieder resetet. das aus-/einblenden der zweiten Ebene geschieht nun ein display: none bzw. display: block
Code:
/* Horizontale Navigation */
#header .mod_navigation {
width:960px;
float:left;
margin:0;
padding-left: 112px;
color:#333;
letter-spacing:0.1em;
box-shadow: 0 5px 3px #9b9b9b;
}
#header .mod_navigation ul {
margin:0;
padding:0;
list-style-type:none;
}
#header .mod_navigation li {
float:left;
}
/* Aussehen Menüpunkte 1 Ebene */
#header .mod_navigation a {
display:block;
padding:0 22px 16px 16px;
text-decoration:none;
color:#333;
background:url("triangle.png") right 5px no-repeat;
}
/* Listenelement in Ebene 2 clearen */
#header .mod_navigation ul.level_2 li {
float: none;
padding:6px 16px;
font-size:0.8em;
}
/* 2 Ebene verstecken */
#header .mod_navigation ul.level_2 {
position: absolute;
display: none;
box-shadow: 0 5px 3px #9b9b9b;
background: #fff;
}
/* 2 Ebene einblenden */
#header .mod_navigation li:hover ul.level_2 {
display:block;
}
/* Aussehen Menüpunkte 2 Ebene */
#header .mod_navigation ul.level_2 a {
display:block;
padding:0;
text-decoration:none;
color:#666;
background: none;
}
#header .mod_navigation ul.level_2 a:hover, #header .mod_navigation ul.level_2 a:active {
color:#c00;
}
den Home button ohne Pfeil bekommst du hin, indem Du der Seite eine Klasse, z.B. "home" gibts, die Klasse bekommt dann auch das li und das a in der navigation, also:
Code:
#header .mod_navigation a.home { background: none; padding-right: 0;}
bzw. wenn es wie gesagt der erste Eintrag ist, über die Klasse .first
Code:
#header .mod_navigation a.first { background: none; padding-right: 0;}
Wenn Du grundsätzlich alle Menüpunkte, die keine Unterpunkte haben, ohne Pfeil haben möchtest, kannst du die Klasse .submenu benutzen, um nur den Menüpunkten mit Untermenü den Pfeil zuzuweisen:
Code:
#header .mod_navigation a {
display:block;
padding:0 0 16px 16px;
text-decoration:none;
color:#333;
}
#header .mod_navigation .submenu a {
background:url("triangle.png") right 5px no-repeat;
padding-right: 22px;
}
Lesezeichen