✔ Javascript / CSS-Menü klappt auf aber nicht mehr zu

M

Medienoperator

Mitglied
Hallo,
bastle gerade an einem Aufklappmenü und habe nun das Problem, dass das Menü zwar aufklappt,, aber sobald die Maus das Menü verlässt, bleibt es offen. Es sollte jedoch wieder zuklappen, nachdem der Mauszeiger außerhalb vom Menü ist. Vielleicht kann mir ja einer von euch schlauen Köpfen weiterhelfen?

Hier mein Code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Expanding horizontal menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script type="text/javascript">
<!--
function flutsch(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">
<!--
/* CSS from tutorials of www.alsacreations.com/articles */



#menu dl,
#menu dt,
#menu dd,
#menu ul,
#menu li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
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;
}




-->
</style>
</head>

<body>

<div id="menu">

	<dl>
		<dt onmouseover="javascript:flutsch('smenu1');">Menu 1</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sub Menu 1.1</a></li>

					<li><a href="#">Sub Menu 1.2</a></li>
					<li><a href="#">Sub Menu 1.3</a></li>
					<li><a href="#">Sub Menu 1.4</a></li>
					<li><a href="#">Sub Menu 1.5</a></li>
					<li><a href="#">Sub Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>


	<dl>
		<dt onmouseover="javascript:flutsch();"><a href="">Menu 2</a></dt>
	</dl>

	<dl>
		<dt onmouseover="javascript:flutsch('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>

					<li><a href="#">Sub Menu 3.1</a></li>
					<li><a href="#">Sub Menu 3.2</a></li>
					<li><a href="#">Sub Menu 3.3</a></li>
					<li><a href="#">Sub Menu 3.4</a></li>
					<li><a href="#">Sub Menu 3.5</a></li>
				</ul>

			</dd>
	</dl>

	<dl>
		<dt onmouseover="javascript:flutsch('smenu4');">Menu 4</dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sub Menu 4.1</a></li>
					<li><a href="#">Sub Menu 4.2</a></li>

					<li><a href="#">Sub Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>

</div>




</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück