nicht angemeldet
CSS Navigation: Unterpunkte sollten Hauptpunkt nach unten...
Hallo Zusammen,
ich baue gerade eine Horizontale CSS-Navigation und hänge ein wenig.
Die Navigation besteht aus Haupt- und Unterpunkten.
Die Unterpunkte sind Standardmässig display:none
Diese werden via Hover eingeblendet und sollen den darunter liegenden Hauptnavigationspunkt nach unten verschieben.
Leider überdecken allerdings die Unterpunkte die darunterliegenden Hauptpunkte. Wo liegt mein Denkfehler. Schon mal danke für die Hilfe!
Quelltext:
<ul id="nav">
<li><span class="headinfo">Navigation</span></li>
<li><a href="http://"><span class="nosub">Punkt</span></a></li>
<li><a href="http://"><span class="subyes">Punkt 1</span></a>
<ul>
<li><a href="http://"><span class="subyes1">Punkt1.1</span></a></li>
<li><a href="http://"><span class="subyes1">Punkt1.2</span></a></li>
</ul>
</li>
<li><a href="http://"><span class="subyes">Punkt 2</span></a>
<ul>
<li><a href="http://"><span class="subyes1">Punkt2.1</span></a></li>
<li><a href="http://"><span class="subyes1">Punkt2.2</span></a></li>
</ul>
</li>
<li><a href="http://"><span class="subyes">Punkt 3</span></a>
<ul>
<li><a href="http://"><span class="subyes1">Punkt3.1</span></a></li>
<li><a href="http://"><span class="subyes1">Punkt3.2</span></a></li>
<li><a href="http://"><span class="subyes1">Punkt3.3</span></a></li>
</ul>
</li>
</ul>
====================================================================
Und das CSS:
body
{
color: #ffffff;
background-color: #eeeeee;
font-family: Arial, Helvetica, Sans-Serif;
}
.headinfo {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #808080;
background-color: #999999;
width: 115px;
list-style-type: none;
background-image: url('../images/sidenavi/red_head.jpg');
background-repeat: no-repeat;
height: 30px;
display: block;
padding-top: 5px;
padding-left: 5px;
}
.nosub {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #808080;
background-color: #999999;
width: 115px;
list-style-type: none;
background-image: url('../images/sidenavi/grey_back.jpg');
background-repeat: no-repeat;
height: 25px;
display: block;
padding-top: 5px;
padding-left: 5px;
z-index: 3;
}
.subyes {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #808080;
background-color: #999999;
width: 115px;
list-style-type: none;
background-image: url('../images/sidenavi/down_button.jpg');
background-repeat: no-repeat;
height: 25px;
display: block;
padding-top: 5px;
margin-top: 0px;
padding-left: 5px;
z-index: 3;
}
.subyes1 {
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #808080;
background-color: #999999;
width: 115px;
list-style-type: none;
background-image: url('../images/sidenavi/grey_back.jpg');
background-repeat: no-repeat;
height: 25px;
display: block;
padding-top: 5px;
margin-top: 0px;
padding-left: 5px;
z-index: 3;
}
ul#nav
{
font-family: 'Arial Unicode MS';
font-size: 14px;
text-transform: none;
color: #ffffff;
text-align: left;
background-color: #CCCCCC;
padding: 0px 0px 0px 0px;
margin: 5px 0px 0px 0px;
width: 120px;
list-style-type: none;
}
ul#nav li
{
border-style: solid;
border-width: 1px 0px 0px 0px;
border-color: #808080;
background-color: #999999;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
list-style-type: none;
background-image: url('../images/sidenavi/grey_back.jpg');
background-repeat: no-repeat;
height: 30px;
width: 120px;
display: block;
}
ul#nav li:hover
{
background-position: right;
background-color: #D2D2D2;
padding: 0px;
margin: 0px;
width: 120px;
list-style-type: none;
height: 30px;
background-image: url('../images/sidenavi/down_button.jpg');
background-repeat: no-repeat;
}
ul#nav a
{
font-family: 'Arial Unicode MS';
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
ul#nav a:hover
{
font-family: 'Arial Unicode MS';
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
ul#nav ul
{
font-family: 'Arial Unicode MS';
font-size: 14px;
color: #333333;
text-align: center;
padding: 0px;
margin: 11px 0px 0px 0px;
width: 120px;
left: 4px;
height: 30px;
top: auto;
list-style-type: none;
position: relative;
}
ul#nav li ul
{
font-family: 'Arial Unicode MS';
display: none;
margin-top: 0px;
}
ul#nav li:hover ul
{
display: block;
background-color: #F0F0F0;
}
-
Hallöchen,
deine Navigation ist zum einen sehr umfangreich gestrickt und ich möchte aus dem Stehgreif mal behaupten, dass man den CSS-Teil nach einer Optimierung auf nen Drittel reduzieren könnte. Auch wofür der span da ist, ist mir noch relativ unschlüssig... Fehlersuche beginnt daher in erster Linie bei der Ordnung und Vermeidung von doppelten und mehrfachen Deklarationen (z.B. li mehrfach margin: 0px;
Dieser Auszug hier lässt mich ein wenig stutzen... das ul ist nur 30px hoch... während es z.B. zwei li beinhaltet, die jeweils aber auch 25+5px hoch sein sollen.
ul#nav ul
{
height: 30px;
top: auto;}
Zusätzlich ist auch hier top: auto; der Standardwert, der eigentlich nicht nochmal erwähnt werden müsste. Ich habe jetzt hier erstmal auf den ersten Blick nur einen scheinbaren Fehler gefunden, eben die Höhe des inneren uls.
Reduziere mal deinen Code soweit möglich, dann hast du mehr Übersichtlichkeit und damit schneller Fehler gefunden...
LG Patrick