horizontales menü mit untermenü für ie6

afr0kalypse · 05.08.2009

hi =)

ich bastel gerade an nem horizontalen menü, welches mir untermenüs anzeigen soll.
funktioniert wunderbar, außer im ie6

dort wird mein div container in der höhe vergrößert, wenn sich das untermenü öffnet. das will ich unterbinden.
hat jemand ne idee wie ich das realisieren kann?

p.s.:
onmouseover/out sowie id=sub1 und id=sub2 werden per php generiert.
anbei mal etwas code:

index.html:

HTML:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>	
	<link href="style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript">
		function anzeigen(submenu)
		{
			//alert(document.getElementById(submenu).style.display);
			if(document.getElementById(submenu))
			{
				if(document.getElementById(submenu).style.display == '')
				{
					document.getElementById(submenu).style.display = 'block';
				}		
			}			
		}
		function ausblenden(submenu)
		{
			if(document.getElementById(submenu))
			{
				if(document.getElementById(submenu).style.display == 'block')
				{
					document.getElementById(submenu).style.display = '';
				}
			}
		}
	</script>
</head>
<body>		
	<div id="haupt-navi">	
		<ul>
			<li onMouseover="anzeigen('sub1')" onMouseout="ausblenden('sub1')">
				<a href="#">main</a>
				<ul id="sub1">
					<li>
						<a href="#">sub</a>
					</li>
					<li>
						<a href="#">sub</a>
					</li>
				</ul>			
			</li>
			<li onMouseover="anzeigen('sub2')" onMouseout="ausblenden('sub2')">
				<a href="#">main</a>
				<ul id="sub2">
					<li>
						<a href="#">sub</a>
					</li>
					<li>
						<a href="#">sub</a>
					</li>
				</ul>	
			</li>
			<li>
				<a href="#">main</a>
			</li>
		</ul>
	</div>
</body>
</html>

style.css

HTML:

a 
{ 
	font-family:verdana;
	color:#006699; 
	text-decoration:none; 
}

a:hover 
{ 
	color:#666; 
	text-decoration:none; 
}

#haupt-navi
{ 	
	width:900px;
	margin-left:5px;
	height:30px;	 
	background:#00345b;	
}
#haupt-navi ul
{			
	list-style-type:none;			
}
#haupt-navi li
{	
	float:left;	
	padding-left:5px;
	padding-right:5px;	
}
#haupt-navi ul li ul
{	
	list-style-type:none;
	padding:0;		
	margin:0;		
	display:none;
	background:#006699;
}
#haupt-navi ul li ul li
{		
	padding:0;
	margin:0;
	float:none;		
}
#haupt-navi a
{		
	padding-left:5px;
	padding-right:5px;
	color:#ffffff;	
	
}
#haupt-navi a:hover
{		
	color:#ddd;	
	background:#006699;
}
#haupt-navi ul li ul li a:hover
{
	color:#006699;	
	background:#ddd;
}

vielleicht hat ja jemand ne idee

grüße
afr0

Tekl · 05.08.2009

AW: horizontales menü mit untermenü für ie6

Konkret kann ich nicht helfen, ich denke das Problem hat hier seine Ursachen:
Über hasLayout ? das Konzept des hasLayout im IE/Win | Deutsche Übersetzung

afr0kalypse · 05.08.2009

AW: horizontales menü mit untermenü für ie6

hi tekl,
danke für die antwort.
das kann durchaus mit dem layout problem zusammenhängen.
ich habe schon folgendes getestet:

HTML:

#haupt-navi ul li ul
{	
	position:absolute;
        ...
}

dadurch wird in allen browsern das gleiche angezeigt. nur im ie 6 wird dann mein untermenü
neben dem hauptmenüpunkt angezeigt, nicht darunter...
dann müsste ich jetzt noch mit nem passenden css hack die position korrigieren.
das wäre vllt ne möglichkeit...

sonst noch ne idee? =)
gruß
afr0