Problem mit FlyOut Menu im IE7

quarki69 · #1 (**permalink**) 15.03.2010, 10:50

Hallo und guten Morgen zusammen!

Ich habe für eine Website ein Menu gebastelt, welches die Hauptmenupunkte in einer Liste enthält, welche jedoch, wegen einer besonderen Schriftart, durch eine Grafik ersetzt werden.
Die Untermenupunkte befinden sich in untergeordneten Listen, werden nur durch das CSS gestaltet und "fliegen" beim überhovern der Überpunkte nach rechts heraus.
Dies alles funktioniert wunderbar; nur nicht im IE7. Dort verschwindet das jeweilige Untermenu, wenn man mit der Maus nicht schnell genug unterwegs ist.

Zwar habe ich nun bereits an mehreren Stellen gelesen, dass genau dieser Bug existiert, komme jedoch absolut nicht dahinter, wieso es sich bei mir so verhält.

Wenn sich jemand die Site online anschauen mag, teile ich den Link dort hin gerne mit. Aber vielleicht reichen ja auch die folgenden Auszüge zur Fehlerfindung aus.

Ganz vielen Dank und schöne Grüße, Mark

Auszug aus dem HTML:

HTML-Code:

<head>
   <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
   	<title>Meine Seite</title>
   	<link href="new.css" rel="stylesheet" type="text/css" />
	  <!--[if lte IE 7]><style type="text/css">
	  		#navigation a {cursor: hand;}
				*html #navigation a:hover {	text-indent: 0;}
				*html #navigation ul ul li {
					margin-top: -1px;
					}
			</style><![endif]-->
		<!--[if lte IE 6]>
  	<style type="text/css">
			body {behavior: url(sidepages/csshover.htc);}
  	</style>
  		<noscript>
				<style type="text/css">
				#navigation ul ul {margin: 0px;}
				</style>
  		</noscript>
		<![endif]-->
		<script type="text/javascript" src="sidepages/jquery-1.2.6.min.js"></script>

...

</head>



<div id="navigation">
		<ul>
			<li id="warum"><a href="fueruns.html">WARUM WIR?<b></b></a></li>
			<li id="wohlfuehl"><a href="wohlfuehl.html">WOHLF&Uuml;LATMOSPH&Auml;RE<b></b></a></li>
			<li id="team"><a href="team.html">TEAM<b></b></a>		
				<ul>
					<li class="first"><a href="doktor1.html">Dr. Eins</a></li>
					<li><a href="doktor2.html">Dr. Zwei</a></li>
					<li><a href="doktor3.html">Dr. Drei</a></li>
					<li><a href="doktor4.html">Dr. Vier</a></li>
					<li><a href="mitarbeiter1.html">Mitarbeiter Eins</a></li>
					<li><a href="mitarbeiter2.html">Mitarbeiter Zwei</a></li>
					<li><a href="mitarbeiter3.html">Mitarbeiter Drei</a></li>
					<li><a href="mitarbeiter4.html">Mitarbeiter Vier</a></li>
					<li><a href="mitarbeiter5.html">Mitarbeiter F&uuml;nf</a></li>
					<li><a href="mitarbeiter6.html">Mitarbeiter Sechs</a></li>
					<li><a href="mitarbeiter 7.html">Mitarbeiter Sieben</a></li>
					<li><a href="mitarbeiter8.html">Mitarbeiter Acht</a></li>
				</ul>
			</li>
			<li id="praxis"><a href="praxis.html">PRAXIS<b></b></a>
				<ul>
						<li class="first"><a href="kontakt.html">Kontakt</a></li>
						<li><a href="anfahrt.html">Anfahrt</a></li>
						<li><a href="ueberuns.html">&Uuml;ber uns</a></li>
						<li><a href="zeiten.html">&Ouml;ffnungszeiten</a></li>
						<li><a href="impressum.html">Impressum</a></li>
					</ul>
				</li>
			<li id="leistung"><a href="leistung.html">LEISTUNGSSPEKTRUM<b></b></a>
				<ul>
						<li class="first"><a href="technik.html">Neueste Technik</a></li>
						<li><a href="implantologie.html">Implantologie</a></li>
						<li><a href="funktionell.html">Funktionelle Behandlung</a></li>
						<li><a href="aesthetik.html">&Auml;sthetische Behandlung</a></li>
						<li><a href="kinder.html">Kinderzahnbehandlung</a></li>
						<li><a href="falten.html">Faltenbehandlung</a></li>
						<li><a href="reinigung.html">Professionelle Zahnreinigung</a></li>
						<li><a href="kiefer.html">Kieferorthop&auml;die</a></li>
						<li><a href="medizin.html">Ganzheitliche Zahnmedizin</a></li>
						<li><a href="kopfschmerz.html">Craniomandibul&auml;re Dysfunktion</a></li>
					</ul>
				</li>
			<li id="service"><a href="service.html">SERVICE<b></b></a>
				<ul>
						<li class="first"><a href="praxisservice.html">Praxisservice</a></li>
						<li><a href="news.html">News</a></li>
				</ul>
			</li>
		</ul>
	</div>

Das entsprechende CSS:

Code:

#menu{
	float:left;
	margin-left: 20px;
	background-color: #fff;
	}
#logo ul li {
	list-style:none;
	line-height: 0.1em;
	font-size: 0.1em;
	}
#logo a {
	height:150px;
	width: 250px;
	background: #fff url(images/logo.png) no-repeat;
	display: block;
	outline: none;
	}

#logo a span {
	display: none;
}
#navigation ul {
	liststyle: none;
	width: 250px;
	height: 144px;
	float: left;
	}
#navigation li {
	list-style: none;
	width: 250px;
	height: 24px;
	}
#navigation a {
	display: block;
	height: 100%;
	position: relative;
	text-decoration: none;
	overflow: hidden;
}

#navigation a b {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: url(images/navigation.png) no-repeat;
}

#navigation #warum b {
	background-position: 0px -0px;
}
#navigation #wohlfuehl b {
	background-position: 0px -24px;
}
#navigation #team b {
	background-position: 0px -48px;
}
#navigation #praxis b {
	background-position: 0px -72px;
}
#navigation #leistung b {
	background-position: 0px -96px;
}
#navigation #service b {
	background-position: 0px -120px;
}

#navigation li#warum:hover a b {
	background-position: 0px -144px;
}
#navigation li#wohlfuehl:hover a b {
	background-position: 0px -168px;
}
#navigation li#team:hover a b {
	background-position: 0px -192px;
}
#navigation li#praxis:hover a b {
	background-position: 0px -216px;
}
#navigation li#leistung:hover a b {
	background-position: 0px -240px;
}
#navigation li#service:hover a b {
	background-position: 0px -264px;
}

/* fuer den IE6 */

#navigation li#warum a:hover b {
	background-position: 0px -144px;
}
#navigation li#wohlfuehl a:hover b {
	background-position: 0px -168px;
}
#navigation li#team a:hover b {
	background-position: 0px -192px;
}
#navigation li#praxis a:hover b {
	background-position: 0px -216px;
}
#navigation li#leistung a:hover b {
	background-position: 0px -240px;
}
#navigation li#service a:hover b {
	background-position: 0px -264px;
}


#navigation ul ul {
	position: absolute;
	left: -99999px;
	}
#navigation ul li:hover {
	position:relative;
	}
#navigation ul li:hover ul{
	z-index:12;
	left: 250px;
	top: -1px;
	}
	
#navigation li:hover li a {
	background-color: #fff;
	}
#navigation li li a:hover {
	background-color: #f0f0f0;
	}

#navigation ul ul li a {
	display: block;
	height: auto;
	width: 250px;
	padding: 5px 0 5px 0;
	text-decoration:none;
	color: #000;
	outline: none;
	}

#navigation ul ul li{
	text-align: center;
	font-size: 0.9em;
	border-left: 1px solid #c8c8c8;
	border-right: 1px solid #c8c8c8;
	border-bottom: 1px solid #c8c8c8;
	}
#navigation ul ul li.first{
	border-top: 1px solid #c8c8c8;
	margin-top: 0px;
	}

highpix · #2 (**permalink**) 15.03.2010, 14:47

du wendest, wenn ich das richtig gesehen habe :hover auf ein LI Element an, der IE kann aber wenn mich nciht alles täuscht :hover nur auf a elemente verarbeiten, versuche mal in Deiner CSS Bedingung Die Angebae z.B. navigation li li:hover gegen navigation li li a:hover zu setzten.

Gruß
HighPix
Markus Leitner
HighPix | Werbeagentur | Medienagentur | Marketingagentur | Grafikdesign | SEO | Suchmaschinenoptimierung

quarki69 · #3 (**permalink**) 15.03.2010, 15:01

Hallo highpix und willkommen im Forum!

Vielen Dank für den Hinweis!

Die von Dir genannten Einträge sind ja deshalb zwei mal aufgeführt. Ein weiteres mal unter "/* fuer den IE6 */" ...

highpix · #4 (**permalink**) 15.03.2010, 15:09

das habe ich schon gesehen, aber scheinbar hast du anweisungen übersehen, die sich im hover noch immer auf ein Li Element beziehen:

#navigation ul li:hover {
position:relative;
}
#navigation ul li:hover ul{
z-index:12;
left: 250px;
top: -1px;
}

#navigation li:hover li a {
background-color: #fff;
}

dies habe ziemlich am Ende Deines CSS unter der /* ie6 Anweisung entdeckt, vielleicht hast du es übersehen und desshalb noch Probs.

Gruß
HighPix
HighPix | Werbeagentur | Medienagentur | Marketingagentur | Grafikdesign | SEO | Suchmaschinenoptimierung

fricca · #5 (**permalink**) 15.03.2010, 15:19

highpix, IE7 kann li:hover.
Das Dropdownmenü wird in keinem Browser mehr funktionieren, wenn pauschal alles auf a:hover umgestellt wird. Die Submenüs sind keine Kinder von a -- und können es auch nicht sein.
Gemäß den Codeschnipseln soll die Unterstützung für IE6 über behavior: url(sidepages/csshover.htc) umgesetzt werden.

quarki69, du bist doch nicht neu hier. Du kennst die Hinweise für Fragende. Was soll das hier also mit den Codesschnipseln?

quarki69 · #6 (**permalink**) 15.03.2010, 15:46

highpix, ich hab's an anderer Stelle gefunden! Trotzdem vielen Dank für die freundliche Unterstützung...

Mir ist aufgefallen, dass es sichtbare Lücken zwischen den Listenpunkten der untergeordneten UL gab. Sobald man mit der Maus darüberfuhr verschwand die Liste.

Der Eintrag

Code:

#navigation ul ul li {margin-bottom: -1px;}

hat's behoben!

fricca, das mit den Codeschnipseln tut mir leid, daran habe ich nun wirklich nicht gedacht. Sorry!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Css Menu Problem	Rapidement	CSS	11	16.06.2011 14:38
Seit IE9 Problem mit Superfish Menu	theidmann	CSS	7	24.05.2011 15:17
Hilfe css Menu center	xXcyberXx	CSS	5	28.11.2010 19:51
ie 7 - menu css - a:hover behaviour only on text not on the whole box	sycorax27	CSS	1	18.06.2007 22:34