Mouse on/off i foldeudmenu skaber problemer
Når man bevæger musen over menubjælken kommer foldeud-menuerne frem men forlader man denne uden at aktiverer noget menupunkt, bliver foldeudmenuen stående.Har set flere steder det er tilfældet, man skal klikke "udenfor" for at "lukke"
Kan det ikke lade sig gøre at lave det så den forsvinder automatisk når menuen forlades.
<!--
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Horizontal expanderende menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
</script>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 100;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 270px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray;
}
a {text-decoration: none;
color: black;
color: #222;
}
.title
{
background-color: #6D8269;
color: #C7E1A7;
font-weight: bolder;
font-size: x-large;
padding: 10px 20px 10px 20px;
}
.title2
{
background-color: #6D8269;
color: #C7E1A7;
font-weight: lighter;
font-size: small;
}
.titlemargin
{
margin: 10px 0px 10px 0px;
}
.left
{
float: left;
}
.right
{
float: right;
}
</style></head>
<body>
<div class="title titlemargin" style="height: 20px;">
<div style="float: left; margin-left: 120px;">Visithaven.dk</div>
</div>
<div class="title2 titlemargin" style="height: 20px;">
<div style="float: left; margin-left: 160px;">....kan forbedre dit humør og helbred væsentlig</div>
</div>
<div id="menu"style="float: left; margin-left: 60px;">
<dl>
<dt onmouseover="java script:montre();"><a href="http://www.domain.dk/" title="Retur til forside">Forside</a></dt>
</dl>
<dl>
<dt onmouseover="java script:montre('smenu1');">Menu 1</dt>
<dd style="display: none;" id="smenu1">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
<li><a href="#">Menu 1.4</a></li>
<li><a href="#">Menu 1.5</a></li>
<li><a href="#">Menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="java script:montre('smenu2');">Menu 2</dt>
<dd style="display: none;" id="smenu2">
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="java script:montre('smenu3');">Menu 3</dt>
<dd style="display: none;" id="smenu3">
<ul>
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="java script:montre('smenu4');">Menu 4</dt>
<dd style="display: none;" id="smenu4">
<ul>
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2</a></li>
<li><a href="#">Menu 4.3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="site">
<p>This Page Is Valid HTML 4.01 Transitional!<br>
Tested under Internet Explorer, Netscape, Mozilla, Opera og Firebird</p>
</div>
</body></html>
