das: dropdown menü hover

Beitrag lesen

Grüße,
indem du die 7e und 281e Zeilen der CSS löschst und einen schwarzen Hahn opferst.

ok verstehe..sry

html code

<ul id="main_nav">  
	<li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">#</a>  
		<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
		<a href="#">#</a>  
		<a href="#">#</a>  
		</div>  
	</li>  
	<li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">#</a>  
		<div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
		<a href="#">#</a>  
		<a href="#"></a>  
		<a href="#">#</a>  
		<a href="#">#</a>  
		</div>  
	</li>  
	<li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">#</a>  
		<div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
		<a href="#">#</a>  
		<a href="#">#</a>  
		<a href="#">#</a>  
		<a href="#">#</a>  
		</div>  
	</li>  
	<li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">#</a>  
		<div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
		<a href="#">#</a>  
		<a href="#">#</a>  
		<a href="#">#</a>  
		<a href="#">#</a>  
		<a href="#">#</a>  
		</div>  
	</li>  
	<li><a href="#" onmouseover="mopen('m5')" onmouseout="mclosetime()">Links</a>  
		<div id="m5" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">  
		  
		</div>  
	</li>  
</ul>  

css code

@charset "UTF-8";  
/* CSS Document */  
  
#main_nav {  
	margin: 0;  
	padding: 0;  
	z-index: 30;  
}  
  
#main_nav li {  
	margin: 0;  
	padding: 0;  
	list-style: none;  
	float: left;  
	font: 18px helvetica;  
}  
  
#main_nav li a {  
	display: block;  
	margin: 0 1px 0 0;  
	padding: 4px 20px;  
	background: #000;  
	color: #FFF;  
	text-align: center;  
	text-decoration: none;  
}  
  
#main_nav li a:hover {	  
	background: #999;  
}  
  
#main_nav li a:active {	  
	background: #999;  
}  
  
#main_nav div {  
	position: absolute;  
	visibility: hidden;  
	margin: 0;  
	padding: 0;  
	background: #999;  
}  
  
	#main_nav div a {  
		position: relative;  
		display: block;  
		margin: 0;  
		padding: 5px 10px;  
		width: auto;  
		white-space: nowrap;  
		text-align: left;  
		text-decoration: none;  
		background: #999;  
		color: #FFF;  
		font: 18px helvetica;  
	}  
  
	#main_nav div a:hover {  
		background: #900;  
		color: #FFF;  
	}

js code

// JavaScript Document  
  
var timeout         = 500;  
var closetimer		= 0;  
var ddmenuitem      = 0;  
  
// open hidden layer  
function mopen(id)  
{	  
	// cancel close timer  
	mcancelclosetime();  
  
	// close old layer  
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';  
  
	// get new layer and show it  
	ddmenuitem = document.getElementById(id);  
	ddmenuitem.style.visibility = 'visible';  
  
}  
// close showed layer  
function mclose()  
{  
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';  
}  
  
// go close timer  
function mclosetime()  
{  
	closetimer = window.setTimeout(mclose, timeout);  
}  
  
// cancel close timer  
function mcancelclosetime()  
{  
	if(closetimer)  
	{  
		window.clearTimeout(closetimer);  
		closetimer = null;  
	}  
}  
  
// close layer when click-out  
document.onclick = mclose;