---
title: "DropDown Menü in IE"
url: "https://www.typo3.net/d/88960-dropdown-menue-in-ie"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS","JavaScript & AJAX"]
created: "2009-04-17"
last_reply: "2009-04-17"
replies: 0
solved: false
page: 1
pages: 1
lang: "de"
---

# DropDown Menü in IE

TYPO3 › Menüs · 0 Antworten · gestartet 2009-04-17

## Eröffnungsbeitrag

**Lami** · 2009-04-17 · [Beitrag #1](https://www.typo3.net/d/88960-dropdown-menue-in-ie/1)

Hallo,

bräuchte Hilfe bzgl. **DropDown** Menü im **IE**. Mein bis jetzt erstelltes Menü funktioniert mir **Firefox ohne Problemme**, dass sobald ich mit der Maus drüber fahr sich öfnet und schließt. Doch mit IE bleiben mir die Menüs/Untermenüs offen. Erst beim Aktuallisieren schließt sich alles wieder.

Hier meine Codes:

```html
<div class="menu" id="nav"><ul>###MENU1###</ul></div>
```

```javascript
// ist ihm HTML-Script zw. "head" und "body" mit eingebunden
	<script language="JavaScript">
	<!--
	sfHover = function() {
		var sfEls = document.getElementById("nav").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhover\b"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
	//-->
	</script>
```

```typoscript
...
page.includeCSS {
	file1 = fileadmin/mozilla.css
	file1 {
		type = text/css
	}
}

# IE Hack einbinden
page.headerData.20 = TEXT
page.headerData.20.value (
	<!--[if lte IE 7]>
		<link href="fileadmin/IE7.css" rel="stylesheet" type="text/css" />
	<![endif]-->
	<!--[if lte IE 6]>
		<link href="fileadmin/IE6.css" rel="stylesheet" type="text/css">
	<![endif]-->
)

...


      		# Hauptmenü DropDown
		MENU1 = HMENU
		MENU1 {
			special = directory
			special.value = 3
			1 = TMENU
  			1 {
	  			expAll = 1
    				wrap = <ul id="nav">|</ul>
    				
      				NO = 1
      				NO.linkWrap = <li>|</li>

	    			#ACT = 1
    				#ACT.linkWrap = <li bgcolor="#ff0000">|</li>    	
      				
				IFSUB = 1
				IFSUB.wrapItemAndSub = <li>|</li>
  			}
  			
			2 < .1
  			2 {
    				wrap = <ul>|</ul>
    				IFSUB.ATagParams = class="daddy"
  			}
			
			3 < .2
			4 < .3
			5 < .4
			6 < .5
			7 < .6
		}
```

```css
/*~~~~~~~~~~~~~~~~~~~~ Menue1 ~~~~~~~~~~~~~~~~~~~~~~~*/
.menu ul {font:12px Verdana; color:#FFFFFF; display: inline;}

#nav {
	height:20px; text-align:left; list-style:none;
	background-image:url(../fileadmin/images/menues/bground0.png);
	background-position:top; background-repeat:repeat-x;
	font:13px verdana; font-weight:bold; padding:0px;
}

/* ### MENÜ1 1EBENE A ### */
#nav a {
	display: block; text-align:left;
	background-image:url(../fileadmin/images/menues/bground0.png);
	background-position:top; background-repeat:repeat-x;
	border:1px solid #848484; border-top:none; border-bottom:none;
	/*width: 130px; w\idth: 131px;*/
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	color: #333333; text-decoration: none;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 0px; padding-left: 5px;
	margin: 0px 0px 0px 0px;
}

/* ### MENÜ1 1EBENE A - DADDY ### */
#nav a.daddy {
	background-image:url(../fileadmin/images/menues/bground0.png);
	background-position:top; background-repeat:repeat-x;
	border:1px solid #848484; border-bottom:1px solid #848484;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 3px; padding-left: 5px;
	margin: 0px 0px 0px 0px;
	color: #333333;
}

/* ### MENÜ1 1EBENE A - DADDY:HOVER ### */
#nav a.daddy:hover {
	background-image:url(../fileadmin/images/menues/bground01.png);
	background-position:top; background-repeat:repeat-x;
	border:1px solid #848484; border-bottom:1px solid #848484;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 3px; padding-left: 5px;
	margin: 0px 0px 0px 0px;
	color: #FFFFFF;
}

/* ### MENÜ1 1EBENE ### */
#nav li {
	float: left; color: #333333;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 0px; padding-bottom: 0px;
	padding-right: 0px; padding-left: 0px;
	margin: 0px 0px 0px 0px;
}

/* ### MENÜ1 1EBENE A ### */
#nav li a {
	background-image:url(../fileadmin/images/menues/bground0.png);
	background-position:top; background-repeat:repeat-x;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 3px; padding-left: 5px;
	margin: 0px 0px 0px 0px; color: #333333;
}

/* ### MENÜ1 1EBENE A:HOVER ### */
#nav li a:hover {
	background-image:url(../fileadmin/images/menues/bground01.png);
	background-position:top; background-repeat:repeat-x;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 3px; padding-left: 5px;
	margin: 0px 0px 0px 0px; color:#FFFFFF;
}

/* ### MENÜ1 1EBENE A:HOVER ### */
#nav li a.daddy {
	background-image:url(../fileadmin/images/menues/bground0.png);
	background-position:top; background-repeat:repeat-x;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 3px; padding-left: 5px;
	margin: 0px 0px 0px 0px; color:#333333;
}

/* ### MENÜ1 1EBENE A.DADDY:HOVER ### */
#nav li a.daddy:hover {
	background-image:url(../fileadmin/images/menues/bground01.png);
	background-position:top; background-repeat:repeat-x;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 2px; padding-bottom: 0px;
	padding-right: 3px; padding-left: 5px;
	margin: 0px 0px 0px 0px; color:#FFFFFF;
}

/* ### MENÜ1 2EBENE UL ### */
#nav li ul {
	left: -2000px; position:absolute; height:auto;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	font-weight: normal;
	padding-top: 0px; padding-bottom: 0px;
	padding-right: 0px; padding-left: 0px;
	margin: 0px 0px 0px 0px;
}

/* ### MENÜ1 2EBENE ### */
#nav li li {
	font:10px Verdana; font-weight:bold;
	/*background-image:url(../fileadmin/images/menues/bgroundE2.png);
	background-position:top; background-repeat:repeat-x;*/
	margin: -1px 0px 0px 0px;
}

/* ### MENÜ1 2EBENE A ### */
#nav li li a {
	background-image:url(../fileadmin/images/menues/bgroundE2.png);
	background-position:top; background-repeat:repeat-x;
	font:10px Verdana; font-weight:bold;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px; color:#404040;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-left:1px solid #848484;
	border-top:1px solid #848484;
}

/* ### MENÜ1 2EBENE A:HOVER ### */
#nav li li a:hover {
	background-image:url(../fileadmin/images/menues/bgroundE21.png);
	background-position:top; background-repeat:repeat-x;
	font:10px Verdana; font-weight:bold;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px; color:#FFFFFF;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-left:1px solid #848484;
	border-top:1px solid #848484;
}

/* ### MENÜ1 2EBENE A - DADDY ### */
#nav li li a.daddy {
	background-image:url(../fileadmin/images/menues/bgroundE2D.png);
	background-position:right; background-repeat:no-repeat;
	font:10px Verdana; font-weight:bold;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px; color:#404040;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-right:1px solid #848484;
	border-top:1px solid #848484;
}

/* ### MENÜ1 2EBENE A - DADDY ### */
#nav li li a.daddy:hover {
	background-image:url(../fileadmin/images/menues/bgroundE21D.png);
	background-position:right; background-repeat:no-repeat;
	font:10px Verdana; font-weight:bold;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px; color:#FFFFFF;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-right:1px solid #848484;
	border-top:1px solid #848484;
}

/* ### MENÜ1 3EBENE ### */
#nav li ul ul {
	margin: -18px 0px 0px 124px;
	/*background-image:url(../fileadmin/images/menues/bgroundE2.png);
	background-position:top; background-repeat:repeat-x;*/
	border-bottom: 0px solid #848484;
	border-right:0px solid #848484;
	border-top:0px solid #848484;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
}

/* ### MENÜ1 3EBENE A ### */
#nav li ul ul a {
	background-image:url(../fileadmin/images/menues/bgroundE2.png);
	background-position:top; background-repeat:repeat-x;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-right:1px solid #848484;
	border-top:1px solid #848484;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px;
}

/* ### MENÜ1 3EBENE A:HOVER ### */
#nav li ul ul a.hover {
	background-image:url(../fileadmin/images/menues/bgroundE21.png);
	background-position:top; background-repeat:repeat-x;
	font:10px Verdana; font-weight:bold;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px; color:#FFFFFF;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-right:1px solid #848484;
	border-top:1px solid #848484;
}

/* ### MENÜ1 3EBENE A.DADDY ### */
#nav li ul ul a.daddy {
	background-image:url(../fileadmin/images/menues/bgroundE2D.png);
	background-position:right; background-repeat:no-repeat;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-right:1px solid #848484;
	border-top:1px solid #848484;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px;
}

/* ### MENÜ1 3EBENE A.DADDY:HOVER ### */
#nav li ul ul a.daddy:hover {
	background-image:url(../fileadmin/images/menues/bgroundE21D.png);
	background-position:right; background-repeat:no-repeat;
	font:10px Verdana; font-weight:bold;
	padding-top: 2px; padding-bottom: 3px;
	padding-right: 3px; padding-left: 3px;
	margin: 0px 0px 0px 0px; color:#FFFFFF;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
	border-bottom: 1px solid #848484;
	border-right:1px solid #848484;
	border-top:1px solid #848484;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -2000px; border-right:none;
	padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;
	width:124px; w\idth: 124px;
	height: 15px; h\eight: 15px;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;
}

/* ### MENÜ1 2EBENE ### */
#nav li:hover, #nav li.sfhover {
	width:124px; w\idth: 124px;
	height: 20px; h\eight: 20px;
	padding-top: 0px; padding-bottom: 0px; padding-right: 0px; padding-left: 0px;
}
```

Hoffe doch dass mir da jemand weiter helfen kann.

mfg o.O

---

Quelle: „DropDown Menü in IE“, typo3.net, https://www.typo3.net/d/88960-dropdown-menue-in-ie
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.