✔ CSS Drop-Down Menü - IE zickt rum

NetBull

NetBull

Erfahrenes Mitglied
Hi Leute,

ich bin dabei ein joomla portal für meinen Sportverein auf zu setzen und habe ein CSS Problem.

Mein Dropdown funktioniert in allen Browsern, ausser dem IE...

CSS:
Code: 
#Page #Navigation 
{
	height: 32px;
	line-height: 32px;
	color: #F00;
}




#Page #Navigation #left 
{
	float: left;
	height: 32px;
	background-image: url(images/HeadLeftCap.jpg);
	width: 4px;
}





#Page #Navigation #center
{
	float: left;
	height: 32px;
	width: 981px;
	background-image: url(images/HeadCenter.jpg);
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/* listenelemente resetten */
#Page #Navigation #center ul
{
	font-size: 11px;
	margin:0;
	padding:0;
	list-style:none;
	text-decoration:none;
	/* Hintergrundfarbe und ausrichtung des obersten Level! */
	float:left;
	background-color: #FFC;
	background-image: url(images/HeadCenter.jpg);
	text-shadow: 0.3em 0.3em 0.2em #888;
}
#Page #Navigation #center ul , #Page #Navigation #center ul ul li{
	width: 170px;
}

/* Style der Links beeinflussen */
#Page #Navigation #center ul a 
{
	display:block;
	color:#444;
	font-weight:bold;
	border-right:1px solid #fff;
	text-align:left;
	text-decoration: none;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	white-space: nowrap;
}

#Page #Navigation #center ul li  
{/* Menü Sub elemente Positionieren und feste Breite vergeben */
	position:relative;
	float:left;
	/*width:7em*/
}

/* ausblenden der Elemente, für den eingeklappten Zustand */
#Page #Navigation #center ul ul,
#Page #Navigation #center ul li:hover ul ul,
#Page #Navigation #center ul li:hover ul ul ul  
{
	text-shadow: none;
	position:absolute;
	left:-9999px;
	background:#000;
}


/* Rahmen für die zweite Ebene*/
#Page #Navigation #center ul ul
{
	border: 1px solid #999;
}

/* Hintergrund der ersten Ebene */
#Page #Navigation #center ul li:hover ul 
{
	background-color: #DDD;
}


/* Hintergrund der zweiten Ebene */
#Page #Navigation #center ul li:hover ul ul 
{
	margin-top: 5 px;
	background:#EEE;
}

#Page #Navigation #center ul li:hover ul ul ul 
	{/* Hintergrund der dritten Ebene */
		background:#444;
	}
	
/* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/
#Page #Navigation #center ul ul 
{
	top:auto;                    
}
	
	 
/* Einzelne Ebenen einblenden */
#Page #Navigation #center ul li:hover ul  
{
	left:0;
}
	
	
/* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */
#Page #Navigation #center ul ul li:hover ul,
#Page #Navigation #center ul ul ul li:hover ul
{
	position:absolute;
	left:100%;
	top:0;
}
	
	
	
	
	

/* Hover Hinter- und Vordergrundfarbe für alle erste Ebene */
#Page #Navigation #center ul li:hover > a
{
	background-image: url(images/HeadCenterHover.jpg);	
}

/* Hover Hinter- und Vordergrundfarbe für die 2. Ebene */
#Page #Navigation #center ul ul li:hover > a
{
	background-color: #FC6;
	background-image: none;
}

/* Hover Hinter- und Vordergrundfarbe für alle anderen Ebenen */
#Page #Navigation #center ul ul ul li:hover > a,
#Page #Navigation #center ul ul ul ul li:hover > a  
{
	color:#666;
	background-color: #FC6;
}
	
	
	
	
#Page #Navigation #center ul a span 
{
	float:right;
	font-weight:normal;
}

HTML Code:
Code: 
<div id="Navigation">
   	  		<div id="left"></div>
            <div id="center">
<ul class="menu">
<li class="item-101"><a href="/wtfp3.meinweb.org/" >Home</a></li><li class="item-102 active deeper parent"><a href="/wtfp3.meinweb.org/index.php/wingtsung" >WINGTSUN</a><ul><li class="item-103"><a href="/wtfp3.meinweb.org/index.php/wingtsung/wingtsung4kids" >WINGTSUN 4 KIDS</a></li><li class="item-104"><a href="/wtfp3.meinweb.org/index.php/wingtsung/wingtsungwelt" >WINGTSUNWELT</a></li><li class="item-105 active deeper parent"><a href="/wtfp3.meinweb.org/index.php/wingtsung/wingtsungseniors" >WINGTSUN SENIOREN</a><ul><li class="item-106 current active"><a href="/wtfp3.meinweb.org/index.php/wingtsung/wingtsungseniors/testsubmenu" >test sub menü</a></li></ul></li></ul></li></ul>
<div class="EndFloat"></div></div>
			<div id="right"></div>
			<div class="EndFloat"></div>
		</div>

Kann mir jemand sage was ich da falsch mache? Der IE will absolut nicht mitspielen.

LG deAndro
 
Ach der gute alte IE.... ich hoffe Microsoft schribt bald ein Updater der alle IEs auf der Welt löscht und durch einen ordentlichen Browser wie Safari, Chrome oder Firefox ersetzt. Wobei ich auch gestehtn muss das der IE 9 sich schon etwas besser eingegliedert hat.

Leider ist die Formatierung deines Codes (vermutlich beim Posten) etwas daneben. Du versteckst die untermenüs dadurch das du sie mit left aus dem Bildschirm ziehst. Kann man machen, würde ich aber nicht, da es viel schönere wege gibt ellemente unsichtbar zu machen (visibility:hidden;display:none;)

Das der Internet Explorer damit Probleme hat wundert mich nicht. Oft (fast immer) kann man das Problem mit JavaScript lösen. Leider ist es schon eine weile her das ich ein DropDown Menü gemacht habe weswegen ich mir leider beim Grund nichtmehr sicher bin. Ich glaube der IE kann keine Elemente bei einem hover verschieben, aber das ist nur eine theorie. Wie gesagt: mit JS kann man das Problem lösen (evt. mit jQuery, damit geht es einfacher). Ich selbst habe es damals auch so gemacht.

Grüße,
Nico
 
hmmm.... dann muss ein komplett anderer Ansatz her, kein Bock mich da jedes mal durch zu wuseln... Mal sehen ob ich Joomla nicht beibringen kann den code vernünftig aus zu geben, das ich pureCssMenu nutzen kann...
 
Wenn JS nicht geht kannst du das menu ja optional machen. d.h. wer es hat, hat glück. Wer den IE benutzt nimmt einfach die Wurzel-Kategorien in denen er dann die Links zu den Untermenüs findet.
 
Du versteckst die untermenüs dadurch das du sie mit left aus dem Bildschirm ziehst. Kann man machen, würde ich aber nicht, da es viel schönere wege gibt ellemente unsichtbar zu machen (visibility:hidden;display:none
Zum Vergrößern anklicken....
Und was ist mit den Blinden? Screenreader lesen, wass mit displasy:none versteckt ist, nicht vor.
Der IE zickt
Zum Vergrößern anklicken....
Welchen meinst du denn?
In IE7 + 8 finktionierts. 9er + 10er kann ich nicht testen. Für den 6er brauchst du JS. Googel hilft
 
@djheke: blinde werden sich kaum für den Sport interessieren... (allerdings müsste ich meinem Meister mal sagen das ein blinden-taugliches Kung-fu ne geile Sache wäre)

Fehler gefunden: DocType fehlte, deswegen gingen alle CSS Versuche beim IE in die Hose. Das Joomla Template hat den DocType nicht gebaut. *rofl* ca 20 Std. für die Katz wegen so einem PillePalle Kram.. lol
 
wegen der Blinden: Sorry, aber es geht hier um Kontakt-Sport, denke nicht das Blinde Kung-Fu machen können. Denn man muss sehen was man macht, sonst verletzt man sich gegenseitig, .... Also nichts gegen Blinde, denke mal das jedem so was passieren könnte, aber mancher Sport geht ohne Augen nicht. Denke aber drüber nach was man für Blinde machen kann, ...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück