✔ CSS Ausklappmenü funktioniert nicht im IE7

Status
Nicht offen für weitere Antworten.
H

hpatrick

Grünschnabel
Hallo,

für ein Webprojekt, welches ich bald demnächst online stellen möchte, hab ich ein Horizontales Menü mittels CSS eingebaut, welches sich einzeln ausklappt. Dies basiert auf diesem Menü: http://www.cssplay.co.uk/menus/dd_valid_2.html

So, im Firefox läuft das auch Problemlos, der IE 7 zickt jedoch ziemlich rum! Auf der Page oben funktioniert das Menü mit dem IE7, bei meinem Code (unten) jedoch nicht. Was mach ich falsch? Die Conditionals sollten alle richtig sein. Ich glaube ich finde einfach den simplen Fehler nicht...

CSS Code
Code: 
#menu {		
		background-color:#FF9900;
		height:20px;
		width:100%;
		position:relative; 
		margin:0; 
		font-size:11px; 
		margin:20px 0 60px 0; 		
		z-index:100;		
}

#menu ul {
		padding:0;
		margin:0; 
		list-style-type: none;
}

#menu ul li {
		float:left; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee; 
		width:120px;
		list-style-type:none;
		display:inline;
		margin:none;
}

#menu ul li a, .menu ul li a:visited {
		display:block; 
		float:left; 
		width:120px; 
		text-decoration:none; 
		padding:0 0 0 5px; 
		line-height:20px; 
		background-color:#FF9900;
}

#menu table {
		border-collapse:collapse; 
		margin:0; 
		padding:0; 
		font-size:1em;
}

#menu ul li ul {
		visibility:hidden; 
		position:absolute; 
		top:20px; 
		left:0; 
}


#menu ul li:hover a, .menu ul li a:hover {
		color:#000000; 
		background-color:#F7AE16;
}

#menu ul li:hover ul, .menu ul li a:hover ul {
		visibility:visible; 
		width:100%;
		background-color:#F7AE16; 
		color:#fff;
}

#menu ul li:hover ul.right_side li, .menu ul li a:hover ul.right_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
}

#menu ul li:hover ul.left_side li, .menu ul li a:hover ul.left_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
}

#menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {
		background-color:#bd8d5e; 
		color:#fff;
}

#menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {
		visibility:hidden; 
		position:absolute; 
		left:0; 
		top:20px; 
}

#menu ul li:hover ul li a, .menu ul li a:hover ul li a {
		display:block; 
		background-color:#F7AE16; 
		color:#000000;
}

#menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {
		background-color:#dfc184; 
		color:#000;
}

#menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {
		visibility:visible; 
		color:#000; 
		background-color:#dfc184;
}

#menu ul li:hover ul.right li {
		float:right;
}

#menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {
		background-color:#dfc184;
		color:#000;
}

#menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {
		background-color:#bd8d5e; 
		color:#fff;
}

HTML Code
HTML: 
<div id="menu">
<ul>
	<li>
		<a href="index.html">Aktuelles<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">2007</a></li>
			<li><a href="index.html">Presseberichte</li>			
		</ul>
		<!--[if IE 7]><!--></a><!--<![endif]-->
	</li>
	
	<li>
		<a href="index.html">Einsätze<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">2007</a></li>
			<li><a href="index.html">Statistik</a></li>			
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	
	<li>
		<a href="index.html">Wehr<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Wehr</a></li>
			<li><a href="index.html">Kommando</a></li>	
			<li><a href="index.html">Dienstpläne<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->
				<ul class="right_side">
					<li><a href="index.html">Gesamte Wehr</a></li>
					<li><a href="index.html">1. Mot</a></li>	
					<li><a href="index.html">3. Mot</a></li>
					<li><a href="index.html">2. Zug</a></li>
					<li><a href="index.html">AGT Gruppe</a></li>
					<li><a href="index.html">Wettkampfgruppe</a></li>
					<li><a href="index.html">Musikzug</a></li>
				</ul>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>
			<li><a href="index.html">Musikzug</a></li>
			<li><a href="index.html">Informationen</a></li>		
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	
	<li>
		<a href="index.html">Technik<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Ausrüstung</a></li>
			<li><a href="index.html">Alarmierung</a></li>	
			<li><a href="index.html">Fahrzeuge</a></li>	
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	
	<li>
		<a href="index.html">Service<!--[if IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="index.html">Impressum</a></li>
			<li><a href="index.html">Gästebuch</a></li>	
			<li><a href="index.html">Links</a></li>	
			<li><a href="index.html">Intern</a></li>	
		</ul>
		<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
</div>
 
Hi,

so wie ich das überblicke, hast du in den folgenden Selektoren vergessen, den ursprünglichen Klassen-Selektor .menu in den ID-Selektor #menu umzuwandeln:

Code: 
#menu ul li a, .menu ul li a:visited {
		display:block; 
		float:left; 
		width:120px; 
		text-decoration:none; 
		padding:0 0 0 5px; 
		line-height:20px; 
		background-color:#FF9900;
}

#menu ul li:hover a, .menu ul li a:hover {
		color:#000000; 
		background-color:#F7AE16;
}

#menu ul li:hover ul, .menu ul li a:hover ul {
		visibility:visible; 
		width:100%;
		background-color:#F7AE16; 
		color:#fff;
}

#menu ul li:hover ul.right_side li, .menu ul li a:hover ul.right_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
}

#menu ul li:hover ul.left_side li, .menu ul li a:hover ul.left_side li {
		float:left; 
		border:0; 
		border-left-width:1px;
		border-left-style:solid;
		border-left-color:#eee;
}

#menu ul li:hover ul li a.sub, .menu ul li a:hover ul li a.sub {
		background-color:#bd8d5e; 
		color:#fff;
}

#menu ul li:hover ul li ul, .menu ul li a:hover ul li a ul {
		visibility:hidden; 
		position:absolute; 
		left:0; 
		top:20px; 
}

#menu ul li:hover ul li a, .menu ul li a:hover ul li a {
		display:block; 
		background-color:#F7AE16; 
		color:#000000;
}

#menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {
		background-color:#dfc184; 
		color:#000;
}

#menu ul li:hover ul li:hover ul, .menu ul li a:hover ul li a:hover ul {
		visibility:visible; 
		color:#000; 
		background-color:#dfc184;
}

#menu ul li:hover ul li:hover ul li a, .menu ul li a:hover ul li a:hover ul li a {
		background-color:#dfc184;
		color:#000;
}

#menu ul li:hover ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover ul li a:hover {
		background-color:#bd8d5e; 
		color:#fff;
}
 
Nachträglich noch ein allgemeiner Hinweis: Bitte nutze zukünftig nicht die Kurzform "f-u-n-z-t" von funktionieren, da diese vom System ausgefiltert wird, und somit im Thementitel und deinem ersten Beitrag nicht ausgegeben wurde. Vielen Dank.
 
Hallo,

ich hab das gleiche Problem.
Gestern hab ich von IE6 auf IE7 umgestellt. Unter IE6 hat das Menü wunderbar funktioniert, aber unter IE7 funktioniert zwar das Aufklappen der Untermenüs, jedoch wenn ich die Maus dann versuche darauf zu bewegen, um ein Untermenü auszuwählen, verschwindet es wieder! Allerdings nicht immer. Oder ich bewege die Maus innerhalb der Untermenüpunkte und auf einmal verschwindet es plötzlich. Manchmal gehts und manchmal nicht! Sehr seltsam, vor allem weil ich auch keine Regelmäßigkeit erkennen kann (wie z.B. wie schnell ich mit der Maus drüberfahre oder von wo die Maus kommt).
Hat vielleicht jemand eine Ahnung, woran das liegen könnte bzw. wie ich das Problem beheben kann?

Vielen Dank
natket

hier der CSS-Teil:
Code: 
#menu {
	border-left: 1px solid #99d836;
	height: 25px;
	position: absolute;
	top: 65px;
	left: 50%;
	width: 70%;
	margin-left: -95px;
	float: left;
	z-index: 2;
}

#menu li {
	float: left;
	position: relative;
	z-index: 100;
	margin: 0px 1px 0px 0px;
	padding: 0px;
}

#menu li span {
	display: block;
	z-index: 100;
	background: #fd9c2b;
	padding: 0px 22px 0px 20px;
	font-size: 9pt;
	font-weight: normal;
	color: #000;
}

#menu li a, #menu li a:visited {
	display: block;
	text-decoration: none;
	background: #d2fd8e;
	padding: 0px;
	font-size: 9pt;
}

#menu dl {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
}

#menu dt {
	background: #d2fd8e;
	margin: 0px;
	font-size: 9pt;
	float: left;
	border-right: 1px solid #99d836;
}

#menu dd {
	display: none;
	background: transparent;
	border: 0px;
	clear: left;
	margin: 0px;
	padding: 0px;
	color: #fff;
	font-size: 9pt;
	text-align: left;
}

#menu dt a, #menu dt a:visited {
	border: 0px;
	display: block;
	color: #000;
	font-weight: normal;
	margin: 0px;
	padding: 5px 22px 5px 20px;
	text-decoration: none;
}

#menu dt span, #menu dd span {
	border: 0px;
	display: block;
	background: #fd9c2b;
	color: #000;
	font-weight: normal;
	margin: 0px 0px 0px 0px;
	padding: 5px 22px 5px 20px;
	text-decoration: none;
}

#menu dd a, #menu dd a:visited {
	background: #d2fd8e;
	color: #000;
	font-weight: normal;
	text-decoration: none;
	display: block;
	padding: 5px 22px 5px 20px;
}

#menu li a:hover {
	border: 0px;
}

#menu li:hover dd, #menu li a:hover dd {
	display: block;
	border-top: 1px solid #99d836;
}

#menu li:hover dl, #menu li a:hover dl {
	border: 0px;
}

#menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {
	background: #585858;
	color: #fff;
}

und hier der dazugehörende HTML-Teil:
HTML: 
<ul id="menu">
	<li><span>Anfrage</span>
		<dl>
		<dt><span>Anfrage</span></dt>
		<dd><span>Urlaub</span></dd>
		<dd><a href="#">Arztbesuch</a></dd>
		<dd><a href="#">Abwesenheit</a></dd>
		</dl>
	</li>
	<li><span>&Uuml;bersicht</span>
		<dl>
		<dt><a href="#">&Uuml;bersicht</a></dt>
		<dd></dd>
		</dl>
	</li>
</ul>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück