✔ vertikales Ausklappmenu macht im IE7 Probleme

C

crossandgo

Grünschnabel
Hallo!
Ich habe ein vertikales Menu, welches beim hovern das Untermenu ausklappen soll. Leider wird dieses Menu im IE 7 nicht angezeigt. Funktioniert im Firefox einwandfrei. Wo ist der Fehler?
HTML: 
<div id="navi2"> 
<ul>
 <li><a href="#">Home</a></li>
 <li><a href="">Projekte</a>
   <ul>
     <li><a href="#">Hausgarten</a></li>
     <li><a href="#">Reitplätze</a></li>
     <li><a href="#">Springbrunnen</a></li>
   </ul>
 <li><a href="#">Uber uns</a></li>
<li><a href="#">Hausgarten</a></li>
<li><a href="#">Springbrunnen</a></li>
<li><a href="#">Reitplätze</a></li>
</ul>
</div>

Code: 
@charset "utf-8";
#navi2   a, #navi2:visited   {
	display:block;
	height:30px;
	color: #000000;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
	width: 140px;
	line-height: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	text-align: center;
	position: relative;
	background-color: #E6E6E6;
}
#navi2 a:hover {
	background-color: #E6E6E6;
	background-image: url(images/naviHover.png);
	background-repeat: no-repeat;
}
#navi2 {
	float: left;
	width: 140px;
	background-color: #E6E6E6;
}
#navi2 ul {
	list-style-type: none;
	padding-left: 0px;
}
#navi2 ul ul {
	position: absolute;
	top: 0px;
	left: 140px;
z-index: 2;
display: none;
}
#navi2 ul li:hover ul {
display: block;
}
#navi2 ul ul a {
	display:block;
	height:30px;
	color: #000000;
	text-decoration: none;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;
	width: 135px;
	line-height: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	margin: 0px;
	text-align: center;
	position: relative;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #333333;
}
#navi2 li {
position: relative;
}

* {
margin: 0;
padding: 0;
}
 
Hi,

bei mir bereitet das Menü im IE7 überhaupt keine Probleme, denn ich übergebe den Browsern grundsätzlich meine HTML-Seiten mit einer entsprechenden Dokumenttyp-Deklaration im standardkonformen Modus ("Almost Standards Mode").

Demnach liegt der Fehler bei dir in der fehlenden Angabe zum Doctype, weshalb alle Browser in den "Quirks Mode" schalten, und in diesem Darstellungsmodus verhalten sich IE7 u. IE8, wie ihr Vorgänger IE6, der die :hover-Pseudoklasse im Selektor #navi2 ul li:hover ul nicht für das <li>-Element interpretiert, sondern aus der Liste der vielen HTML-Elemente nur a:hover kennt bzw. unterstützt.


mfg Maik
 
Doctypes gibt's da so einige, es muß halt auch der Richtige sein ;-)

In meinem empfohlenen Artikel werden ein paar genannt, die sich hierfür eignen:

Diesen hier nutze ich in meinen Dokumenten:
HTML: 
<!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="de" lang="de">


mfg Maik
 
Hi!
Ich komme da leider nicht weiter, der Fehler muss woanders liegen. Ich schicke Dir mal den kompletten Code:

HTML: 
<!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="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content=" de">
<meta name="description" content=" "/>
<meta name="keywords" content="Rüdiger Koch,  />
<meta name="author" content="AQUA-KO" />
<meta name="publisher" content="AQUA-KO" />
<meta name="copyright" content="AQUA-KO, 2010" />
<meta name="revisit-after" content=" 14 days" />

<title>AQUA-KO | Home</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<link href="Menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="wrapper">

<div id="header"><!--Anfang Header -->
  <div id="logo"></div>
  <div id="headerbild"></div>
</div><!--Ende Header -->


  <div id="header2"><!--Anfang Header2 -->
    <div id="spacer"></div>
    <div id="ecke">
    
    <ul>
    <li><a href="impressum.htm">Impressum</a></li>
    <li><a href="produkte.htm">Produkte</a></li>
    
    </ul>
    </div>
  </div> <!--Ende header2 -->
 
 
<div id="navi2">

   
   <ul>
 <li><a href="#">Home</a></li>
 <li><a href="">Projekte</a>
   <ul>
     <li><a href="#">Hausgarten</a></li>
     <li><a href="#">Reitplätze</a></li>
     <li><a href="#">Springbrunnen</a></li>
   </ul>
  </li>
 <li><a href="#">Uber uns</a></li>
<li><a href="#">Hausgarten</a></li>
<li><a href="#">Springbrunnen</a></li>
<li><a href="#">Reitplätze</a></li>
</ul>
</div><!--Ende Navi-->
  
  
  
  <div id="content"><!--Anfang Content -->
    
  </div>
  <!--Ende Content -->
 <div style="clear:both"></div>

  </div><!--Ende Wrapper -->
   <div id="footer">  </div><!--Ende Footer -->
  
</body>
</html>
 
Hallo!
Erst mal Danke Schön für die schnellen Antworten, auch wenn ic h das Problem immer noch nicht gelöst habe
Ich habe zumindest schon mal rausgefunden, dass anscheinend das ausgeklappte Menü unter dem Content-Container verschwindet. Hast Du da vielleicht noch mal einen Tipp
 
Jo, den hab ich :)

Richte für das umgebende DIV #navi2 mit Hilfe der z-index-Eigenschaft eine Schichtposition ein - so kann sich im IE7 das Untermenü nicht mehr unter dem benachbarten Block verkrümeln:

Code: 
#navi2 {
	float: left;
	width: 140px;
	background-color: #E6E6E6;
	position: relative;
	z-index: 100;
}


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück