Menu klappt nicht nach unten weg

[scherzkecks]

Hallo,
ich habe folgendes Menu (welches sich wiederum in einem DIV befindet:

<ul id="navlist">
					<li><a href="#"><span>Item one</span></a>
						<ul id="subnavlist">
							<li><a href="#"><span>Subitem one</span></a></li>
							<li><a href="#"><span>Subitem two</span></a></li>
							<li><a href="#"><span>Subitem three</span></a></li>
							<li><a href="#"><span>Subitem four</span></a></li>
						</ul>
					</li>
					<li><a href="#"><span>Item two</span></a></li>
					<li><a href="#"><span>Item three</span></a></li>
					<li><a href="#"><span>Item four</span></a></li>
				</ul>

Und dazu folgenden CSS code:

ul#navlist {
	font-family: sans-serif;
}

ul#navlist a
{
font-weight: bold;
text-decoration: none;
}

ul#navlist, ul#navlist ul, ul#navlist li
{
margin: 0px;
padding: 0px;
list-style-type: none;
}

ul#navlist li { float: left; }

ul#navlist li a
{

}

ul#navlist li a:hover
{
/* color: #ffff00;
background-color: #003366; */
}

ul#navlist li a:active
{
/* color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset; */
}

ul#subnavlist { 
	display: none;
	z-index: 101;
}

ul#subnavlist li { 
	float: none;
}

ul#subnavlist li a {
	padding: 0px;
	margin: 0px;
}

ul#navlist li:hover ul#subnavlist {
	display: block;
	position: absolute;
	font-size: 8pt;
	padding-top: 5px;
}

ul#navlist li:hover ul#subnavlist li a {
	display: block;
	width: 10em;
	border: none;
	padding: 2px;
}

Kann mir einer erklären wieso die Items nicht nach unten sondern nach oben aufklappen?
liegt das am z-index****?

 

[CPoly]

Ich hab den Code 1zu1 kopiert und dir einen Screenshot angehängt (der Cursor ist nicht zu sehen, stell ihn dir über dem ersten Menüpunkt vor). Kann das Problem also nicht reproduzieren, es muss an was anderem liegen (an weiteren CSS Regeln oder der Umgebung, z.B. das umgebene DIV).

Noch ein Hinweis für die Zukunft: Was du mit deinen CSS Regeln machst, nennt sich "über-qualifizieren". Das mindert die Lesbarkeit und vor allem die Performance. Hier Beispiele für Regeln die in dem Fall absolut das gleiche erzielen.

/*vorher*/
ul#navlist

ul#navlist li:hover ul#subnavlist li a

ul#navlist li a:active

/*besser*/
#navlist

li:hover #subnavlist a

#navlist a:active