✔ Flyout Menu für IE 5.5 und 6.0

[zempsit]

Hallo zusammen! Ich versuche gerade ein CSS Flyout-Menu zu basteln. Unter Firefox 2, Opera 9.0, IE 7, Safari 1.3.2, Netscape 7.2 und Mozilla 1.7 sieht das Ganze auch ganz gut aus. Bei einigen Browsern, wie IE 5.5 und 6, aber auch Netscape 6 oder Opera 6 funktioniert mein Menu aber nicht.

Weiss jemand, wie ich dieses Problem lösen könnte? Oder ist es gar nicht möglich ein Flyout-Menu nur mit CSS für diese Browser zu machen?

Mein CSS:

/* Menu Navigation ---------------------------------------------------------------------------- */

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width:176px;
	}

#menu img {
    border: none;
} 
	
#menu {
	width:176px;
	margin: 0px 0px 1px 0px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	}

/* für IE5.5 */
* html #menu ul {margin-left:-16px; ma\rgin-left:0; width:192px; w\idth:176px;}
	
#menu li {
	position:relative;
	}	
	
#menu li a {
	height: 19px;
	text-decoration: none;
	}	
	
/* buttons ohne pfeil */
#menu li a:link, #menu li a:visited {
	color: #FFFFFF;
	display: block;
	background:  url(menu.gif);
	padding: 6px 0 2px 27px;
	}
	
#menu li a:hover {
	color: #FFFFFF;
	background:  url(menu.gif) 0 -27px;
	padding: 6px 0 2px 27px;
	}

/* buttons mit pfeil */
#menu li.up a:link, #menu li.up a:visited {
	color: #FFFFFF;
	display: block;
	background:  url(menu_up.gif);
	padding: 6px 0 2px 27px;
	}
	
#menu li.up a:hover {
	color: #FFFFFF;
	background:  url(menu_up.gif) 0 -27px;
	padding: 6px 0 2px 25px;
	}
	
	
/* zweites level */
#menu ul ul {
visibility:hidden;
position:absolute;
top:-48px;
left:-151px;
padding:50px 0px;
width:150px;
margin:0px;
}

/* zweites level sichtbar */
#menu ul li:hover ul,
#menu ul a:hover ul {
visibility:visible;
}

/* zweites level buttons */
#menu ul li:hover ul li a:link,
#menu ul a:hover ul li a:link,
#menu ul li:hover ul li a:visited,
#menu ul a:hover ul li a:visited {
display:block;
background-color:#FF8C00;
background-image:none;
color:#FFFFFF;
padding:3px 2px 3px 5px;
border-bottom:1px solid #FFFFFF;
height:17px;
margin:0px;
}

#menu ul li:hover ul li a:hover,
#menu ul a:hover ul li a:hover {
display:block;
background:#FFA500;
background-image:none;
color:#FFFFFF;
}

Mein HTML-File:

<div id="menu">
			<ul>
				<li><a href="#1" title="Link 1">Startseite</a>				
				<li><a href="#2" title="Link 2">&Uuml;ber mich </a></li>
			        <li class="up"><a href="#3" title="Link 3">Meine Hobbies </a>
					<ul>
						<li><a href="">Mountainbiken</a></li>
						<li><a href="">Ski fahren</a></li>
						<li><a href="">Eishockey</a></li>
						<li><a href="">Lesen</a></li>
						<li><a href="">Politik</a></li>
					</ul>
				</li>
				<li><a href="#4" title="Link 4">Lebenslauf</a></li>
				<li class="up"><a href="#5" title="Link 5">Meine Familie </a>
					<ul>
						<li><a href="">Christian</a></li>
						<li><a href="">Daniela</a></li>
						<li><a href="">Hanni</a></li>
						<li><a href="">Jaro</a></li>
					</ul>
			        </li>	
	        	</ul>
</div>

Ich bin für jede Hilfe dankbar!

Freundliche Grüsse

zempsit

Entschuldigung. Ich habe noch ganz vergessen die Adresse der Website anzugeben: http://www.oelapaloema.ch.

 

[Maik]

Schau dir hierfür mal Stu Nicholls' CSS-Multi-Level-Menus an.

Und hier das entsprechende Beispiel für solch ein Flyout-Menu: http://www.cssplay.co.uk/menus/flyout3.html

 

[zempsit]

So, es hat glaube ich geklappt.Der Fehler lag daran, dass beim IE 6 noch eine Tabelle rundherum muss und der Link-Tag erst nach dem zweiten Level endet:

<li class="up"><a href="#3" title="Link 3">Meine Hobbies <!--[if IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul>
      <li><a href="">Mountainbiken</a></li>
      <li><a href="">Ski fahren</a></li>
      <li><a href="">Eishockey</a></li>
      <li><a href="">Lesen</a></li>
      <li><a href="">Politik</a></li>
    </ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

Vielen Dank für den Verweis auf die Website.