nicht angemeldet
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;
}