Problem mit vertikaler Navigation
Hallo,
als Neuling hier erhoffe ich mir von Euch Hilfe, denn ich weiß nicht mehr weiter.
Ich habe eine vertikale Navigation. Jetzt treten in den unteren Ebenen bei den Navigationspunkten, die noch weitere Unterpunkte haben, zwei seltsame Phänomene auf, wenn ich sie aufrufe:
1. Das <ul> mit den Unterpunkten ist nicht mehr linksbündig.
2. Unter dem <ul> mit den Unterpunkten ist das Padding des aktuellen Navipunkts sichtbar.
Beides verschwindet, wenn ich einen Punkt aus der dritten Ebene aufrufe.
Hier könnt Ihr Euch ansehen, wie es NICHT aussehen soll:
http://dev.janhinnerk.de/menue.html
Und so soll es eigentlich aussehen:
http://dev.janhinnerk.de/menue_2.html
Dies ist das Stylesheet:
Code:
* {
padding: 0;
margin: 0;
}
body {
background-color: white;
font: 70% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #666666;
margin:30px;
}
.clear {
clear: both;
}
#leftcolumn {
display: inline;
color: #333;
margin: 20px 20px 20px 20px;
padding: 0px;
width: 180px;
float: left;
}
#menucontainer {
color: #666;
width: 180px;
margin: 0;
}
#menu {
width: 100%;
overflow: hidden;
margin: 0em 0 0.5em 0;
list-style-type: none;
border-top: 2px #ddd solid;
border-bottom: 2px #ddd solid;
}
#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#menu li {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
#menu a, #menu strong {
display: block;
width: 100%; /* 95% */
padding: 3px 0px 3px 5%;
text-decoration: none;
background-color: #ccc; /* #fff*/
color: #666;
border-bottom: 1px #eee solid;
}
/* Menu Title */
#menu li#title {
width: 100%; /*95%*/
padding: 3px 0px 3px 5%;
font-weight: bold;
color: #666;
background-color: #ccc; /* #fff;*/
border-bottom: 4px #999 solid;
}
#menu li span {
display: block;
width: 95%;
padding: 3px 0px 3px 5%;
font-weight: bold;
border-bottom: 1px #ddd solid;
}
/* Level 1 */
#menu li#active, #menu li strong {
width: 100%; /* 95% */
padding: 3px 0px 3px 5%;
font-weight: bold;
color: #c60;
background-color: #ccc; /* fff; */
border-bottom: 1px #eee solid;
display: block;
}
#menu li a {
width: 100%; /* 95% */
padding-left: 5%;
background-color: #f8f8f8;
color: #666;
}
#menu li a:focus,
#menu li a:hover,
#menu li a:active {
background-color: #eee;
color: #c60;
}
/* Level 2 */
#menu li ul li a,
#menu li ul li#active,
#menu li ul li strong,
#menu li ul li span {
width: 100%; /* 90% */
padding-left: 10%;
}
#menu li ul li a {
background-color: #f8f8f8;
color: #666;
}
#menu li ul li a:focus,
#menu li ul li a:hover,
#menu li ul li a:active {
background-color: #eee;
color: #c60;
}
/* Level 3 */
#menu li ul li ul li a,
#menu li ul li ul li#active,
#menu li ul li ul li strong,
#menu li ul li ul li span {
width: 100%; /* 85% */
padding-left: 15%;
}
#menu li ul li ul li a {
background-color: #f8f8f8;
color: #999;
}
#menu li ul li ul li a:focus,
#menu li ul li ul li a:hover,
#menu li ul li ul li a:active {
background-color: #eee;
color: #c60;
}
/* Level 4 */
#menu li ul li ul li ul li a,
#menu li ul li ul li ul li#active,
#menu li ul li ul li ul li strong,
#menu li ul li ul li ul li span {
width: 100%; /* 80% */
padding-left: 20%;
}
#menu li ul li ul li ul li a {
background-color: #f8f8f8;
color: #aaa;
}
#menu li ul li ul li ul li a:focus,
#menu li ul li ul li ul li a:hover,
#menu li ul li ul li ul li a:active {
background-color: #eee;
color: #c60;
}
Bitte stört Euch nicht an den auskommentierten Prozentzahlen. Das waren meine Versuche am Anfang, die stehen nur noch als Merkposten drin. Und die auskommentierte Hintergrundfarbe ist die, die der aktive Punkt eigentlich haben soll. Zur Verdeutlichung habe ich den Navi-Punkt dunkel gefärbt.
Ich bin nicht so der CSS-Freak, daher weiß ich jetzt hier nicht mehr weiter. Ich finde einfach den Fehler nicht bzw. weiß nicht, wie ich ihn umgehen kann. :cry:
Vielleicht habt Ihr eine Idee?
Vielen Dank,
Krissie
|