CSS <UL> mærkeligt indryk
Jeg er ved at lave en menu, men får en mærkelig fejl. Der kommer et indryk ned selvom y index koordinat er 0Jeg er interesseret i at POSITION i navMenu er relative da menuen skal kunne bruges overalt.
Håber at i kan finde fejlen, jeg kan ikke se hvor det går galt.
Link til problemet www.webkiosken.dk/test.html
HTML-koden
Koden til style: (HTML længere nede)
#navMenu {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 10px; Z-INDEX: 50; 0px; MARGIN: 0px; PADDING-TOP: 0px; HEIGHT: 20px; BACKGROUND-COLOR: #aaaaaa
}
#navMenu LI {
DISPLAY: block; Z-INDEX: 50; WIDTH: 120px; LIST-STYLE-TYPE: none; POSITION: relative; HEIGHT: 18px; TEXT-ALIGN: center
}
#navMenu A {
DISPLAY: block; FONT-WEIGHT: bold; Z-INDEX: 50; WIDTH: 120px; COLOR: #ffffff; HEIGHT: 18px; TEXT-DECORATION: none
}
#n1 {
LEFT: 0px; top:0px; BACKGROUND-COLOR: #cccccc
}
#n2 {
LEFT: 120px; top:0px; BACKGROUND-COLOR: #dddddd
}
#n3 {
LEFT: 240px; top:0px; BACKGROUND-COLOR: #eeeeee
}
#n4 {
LEFT: 360px; top:0px; BACKGROUND-COLOR: #ffffff
}
#n1 A:hover {
BACKGROUND-POSITION: 0px -18px; COLOR: #ffffff; BACKGROUND-COLOR: #cccccc
}
#n2 A:hover {
BACKGROUND-POSITION: -150px -18px; COLOR: #ffffff; BACKGROUND-COLOR: #ddddd
}
#n3 A:hover {
BACKGROUND-POSITION: -300px -18px; COLOR: #ffffff; BACKGROUND-COLOR: #eeeee
}
#n4 A:hover {
BACKGROUND-POSITION: -450px -18px; COLOR: #ffffff; BACKGROUND-COLOR: #fffff
}
#navMenu LI UL {
BORDER-RIGHT: #526e8d 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #123456 0px solid; PADDING-LEFT: 2px; LEFT: -1px; VISIBILITY: hidden; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 0px 1px; BORDER-LEFT: #526e8d 1px solid; WIDTH: 150px; PADDING-TOP: 2px; BORDER-BOTTOM: #526e8d 4px solid; POSITION: absolute
}
#navMenu #n1 UL {
BACKGROUND-COLOR: #cccccc
}
#navMenu #n2 UL {
BACKGROUND-COLOR: #dddddd
}
#navMenu #n3 UL {
BACKGROUND-COLOR: #eeeeee
}
#navMenu #n4 UL {
BACKGROUND-COLOR: #ffffff
}
#navMenu LI UL LI {
FONT-WEIGHT: normal; Z-INDEX: 56; WIDTH: auto; COLOR: #000000; POSITION: relative; TEXT-ALIGN: left;
}
#navMenu LI UL LI A {
FONT-WEIGHT: normal; Z-INDEX: 56; WIDTH: auto; COLOR: #000000; POSITION: relative; TEXT-ALIGN: left
}
<html>
<head>
<title>TestSide menu</title>
<link rel="stylesheet" type="text/css" href="dreamstyle.css" />
<script language="javascript" type="text/javascript" src="dreammenu.js"></script>
</head>
<body bgcolor="#aaaaaa">
<table>
<tr>
<td>Her er noget indhold zxcbzxcb<br><br></td>
</tr>
<tr>
<td>
<ul id="navMenu">
<li id="n1">
<a href="">Galleri</a>
<ul>
<li><a href="http://www.webkiosken.dk">WebKiosken</a></li>
<li><a href="http://www.webkiosken.dk">WebKiosken</a></li>
</ul>
</li>
<li id="n2">
<a href="">Galleri</a>
<ul>
<li><a href="http://www.webkiosken.dk">WebKiosken</a></li>
</ul>
</li>
<li id="n3">
<a href="">Galleri</a>
<ul>
<li><a href="http://www.webkiosken.dk">WebKiosken</a></li>
</ul>
</li>
<li id="n4">
<a href="">Galleri</a>
<ul>
<li><a href="http://www.webkiosken.dk">WebKiosken</a></li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>Her er noget indhold zxcbzxcb<br><br></td>
</tr>
</table>
<script language="javascript" type="text/javascript">
<!--
DreamMenu('navMenu');
//-->
</script>
</body>
</html>
