En drop down menu som ikke vil det jeg vil.
Hej eksperterJeg har en drop down menu som ikke opfører sig som jeg gerne vil have at den skal. menuen skal stå lige neden under, putter jeg den i en tabel kommer den ikke eller også står den andre steder på siden.
HTML koden
<html>
<head>
<title>Tværpolitisk Ungdom Holstebro</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<center>
<img class="ramme" src="img/top.png">
<div class="main">
<div class="overskrift"><h1>Tværpolitisk Ungdom Holstebro</h1></div>
<div class="logo"></div>
<div class="menu">
<a href="http://www.politiskeunge.dk" target="fram"><span>Forside</span></a>
<form onmouseover="showmenu('om')" onmouseout="hidemenu('om')">
<a href="" target="fram"><span>Om foreningen</span></a><br />
<table class="menu" id="om" width="120">
<tr><td class="menu"><a href="">Bestyrelsen</a></td></tr>
<tr><td class="menu"><a href="">Vedtægter</a></td></tr>
<tr><td class="menu"><a href="">Referater</a></td></tr>
<tr><td class="menu"><a href="">Økonomi</a></td></tr>
<tr><td class="menu"><a href="">Kontakt</a></td></tr>
</table></form>
<a href="" target="fram"><span>Nyheder</span></a>
<a href="" target="fram"><span>Kalender</span></a>
<a href="" target="fram"><span>Sponsorer</span></a>
</div>
</center>
</body
</html>
CSS koden
/* Standard elementer*/
* {
margin: 0;
padding: 0;
}
a {
color: #999;
text-decoration: none;
}
body {
background: #96B5B8;
color: #555;
text-align: left;
font: normal 0.7em sans-serif,Arial;
}
ul {
margin: 12px 0;
}
li {
margin-left: 18px;
}
div.quote {
margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
padding-left: 28px;
color: #666;
}
.main {
background: #FCFDFD;
/*border: 3px double #82A0C2; */
/*border: 1px solid #EFF6FC;*/
margin: 20px auto 4px auto;
text-align: left;
width: 800px; /*602px*/
}
.ramme{
margin: -20px;
}
.logo {
background: #FCFDFD url(img/logo.png) no-repeat center;
height: 300px;
}
.overskrift {
color: #000000;
font: bold 20px Tahoma,sans-serif;
text-align: center;
}
/* Menu */
.menu a {
background: #FCFDFD;
color: #444;
font-size: 1.2em;
float: left;
padding-top: 4px;
width: 160px;
height: 30px;
text-align: center;
}
.menu a span {
padding-left: 6px;
}
.menu a:hover {
background-position: left bottom;
color: #666;
font-style: bold;
font-size: 20px;
}
.menu a#last {
width: 150px;
border-right: none;
}
.menu table {
font-size:100%;
position:absolute;
top: 403px;
visibility:hidden;
}
.brugerMenu a {
color: #444;
float: left;
padding-top: 4px;
width: 570px;
height: 25px;
text-align: center;
}
.brugerMenu a:hover {
background-position: left bottom;
color: #666;
font-style: bold;
font-size: 20px;
padding-top: 0px;
}
.content {
/*border-top: 1px solid #1A1A1A;*/
background: #EFF6FC;
clear: both;
width: 100%;
}
.content h1 {
margin: 0 0 4px;
font: bold 1.1em sans-serif,Arial;
color: #666;
}
.content p {
margin: 0 0 12px;
}
.item {
background: #EFF6FC url(img/bgitem.gif) repeat-x;
padding: 8px 10px;
}
.item a{
color: #999;
text-decoration: none;
}
.item a:hover {
/*background: url(img/link.png);*/
color: #444;
text-decoration: underline;
}
/* Footer */
.footer {
padding: 5px;
background: #0A0A0A;
color: #666;
}
.lille {
margin: 0 0 4px;
text-align: center;
background: #EFF6FC;
clear: both;
font-size: 20px;
color: #00000;
height: 20px;
}
#ur {
margin: 0 10px 4px -30px;
float: right;
font-size: 20px;
line-height: overline;
}
h2 {
font: italic 10px Tahoma,sans-serif;
}
/* Footer */
.footer {
padding: 5px;
background: #0A0A0A;
color: #666;
}
.lille {
margin: 0 0 4px;
text-align: center;
background: #EFF6FC;
clear: both;
font-size: 20px;
color: #00000;
height: 20px;
}
#ur {
margin: 0 10px 4px -30px;
float: right;
font-size: 20px;
line-height: overline;
}
h2 {
font: italic 10px Tahoma,sans-serif;
}
