problemer med drop down menu
Hejsa. Jeg har to problemer med min drop down menu.1: linksne ligger sig BAGVED indholdet så man ikke rigtig kan komme til at trykke på dem.
2: Når åbner siden, vises menuerne fra start, og opføre sig først som de skal efter man har kørt curseren over.
min html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>
<meta http-equiv="Content-Language" content="da" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>WGT_forside</title>
<link rel="stylesheet" href="wgt_css.css" type="text/css" />
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="invisible";
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<center>
<table>
<table>
<tr>
<td onmouseover="showmenu('lineup')" onmouseout="hidemenu('lineup')">
<a href="/default.asp">Lineup</a><br />
<table class="menu" id="lineup">
<tr><td class="menu"><a href="#">2005</a></td></tr>
<tr><td class="menu"><a href="#">2006</a></td></tr>
<tr><td class="menu"><a href="#">2007</a></td></tr>
<tr><td class="menu"><a href="band_lineup_2008.html">2008</a></td></tr>
<tr><td class="menu"><a href="band_lineup_2009.html">2009</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('gallery')" onmouseout="hidemenu('gallery')">
<a href="/default.asp">gallery</a><br />
<table class="menu" id="gallery">
<tr><td class="menu"><a href="#">2005</a></td></tr>
<tr><td class="menu"><a href="#">2006</a></td></tr>
<tr><td class="menu"><a href="#">2007</a></td></tr>
<tr><td class="menu"><a href="#">2008</a></td></tr>
<tr><td class="menu"><a href="gallery_2009.html">2009</a></td></tr>
</table>
</td>
<td onmouseover="showmenu('info')" onmouseout="hidemenu('info')">
<a href="/site/site_validate.asp">info</a><br />
<table class="menu" id="info">
<tr><td class="menu"><a href="forside.html">forside</a></td></tr>
<tr><td class="menu"><a href="contact.html">contact</a></td></tr>
<tr><td class="menu"><a href="ticket_prices.html">ticket prices</a></td></tr>
<tr><td class="menu"><a href="program.html">program</a></td></tr>
<tr><td class="menu"><a href="http://www.wave-gotik-treffen.de/forumwgt/index.php">forum</a></td></tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</td>
</div>
<div id="indhold">
<center>
<br />
<h3>Pictures from 2009</h3>
<table>
<tr>
<td><a href="gallery\2009\wgt7865.jpg"><img width="50px height="50px" src="gallery\2009\wgt7865.jpg"><a/></td>
<td><a href="gallery\2009\wgt6249.jpg"><img width="50px height="50px" src="gallery\2009\wgt6249.jpg"><a/></td>
<td><a href="gallery\2009\wgt6246.jpg"><img width="50px height="50px" src="gallery\2009\wgt6246.jpg"><a/></td>
</tr>
<tr>
<td><a href="gallery\2009\wgt6254.jpg"><img width="50px height="50px" src="gallery\2009\wgt6254.jpg"><a/></td>
<td><a href="gallery\2009\wgt6255.jpg"><img width="50px height="50px" src="gallery\2009\wgt6255.jpg"><a/></td>
<td><a href="gallery\2009\wgt6263.jpg"><img width="50px height="50px" src="gallery\2009\wgt6263.jpg"><a/></td>
</tr>
<tr>
<td><a href="gallery\2009\wgt6252.jpg"><img width="50px height="50px" src="gallery\2009\wgt6252.jpg"><a/></td>
<td><a href="gallery\2009\wgt6291.jpg"><img width="50px height="50px" src="gallery\2009\wgt6291.jpg"><a/></td>
<td><a href="gallery\2009\wgt6253.jpg"><img width="50px height="50px" src="gallery\2009\wgt6253.jpg"><a/></td>
</tr>
<tr>
<td><a href="gallery\2009\wgt6283.jpg"><img width="50px height="50px" src="gallery\2009\wgt6283.jpg"><a/></td>
<td><a href="gallery\2009\wgt6296.jpg"><img width="50px height="50px" src="gallery\2009\wgt6296.jpg"><a/></td>
<td><a href="gallery\2009\wgt6363.jpg"><img width="50px height="50px" src="gallery\2009\wgt6363.jpg"><a/></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
min css:
* {margin:0;
padding:0;}
body {
background-image: url(billeder/background2.jpg);
background-repeat:no-repeat;
background-position:bottom center;
background-attachment:fixed;
background-color:grey;}
#container {background-color: none;
width: 650px;
height: 600px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
}
#menu {background-color:none;
width:650px;
height:100px;
float:left;
border-bottom:2px solid black;
border-top:2px solid black;}
#indhold {background-color:none;
width:650px;
height:550px;
attachment:fixed;
padding-top:50px;
border-bottom:2px solid black;}
a {color:white;
font-size:25px;
text-decoration:none;
font-family:Old English Text MT;
padding:50px;}
a.or_text {color:black;
font-family:Adobe Heiti Std R;
font-size:20px;
text-decoration:none;}
a.or_text:hover {color:black;
font-family:Adobe Heiti Std R;
font-size:20px;
text-decoration:none;}
a.none_menu {color:black;
font-family:Adobe Heiti Std R;
font-size:20px;
text-decoration:none;}
a.none_menu:hover {color:white;
font-family:Adobe Heiti Std R;
font-size:20px;
text-decoration:none;}
a:hover {color:black;
font-size:25px;
text-decoration:underline;
font-family:Old English Text MT;
padding:50px;}
li {font-size:20px;}
td.menu {border:1px solid black;
background-color:#cccccc;}
