Hey SD'ers.

Even een vraagje...
Ik heb een tijdje terug een webshop online gezet, maar nu kwam ik er laatst achter dat in IE 7.0 de dropdown menu's naar beneden blijven.

Zie de bijlage voor afbeelding

De code in CSS van het menu is:

Code:

#menu_houder ul.menu {
	margin: 4px 0px; padding: 0;
	float: left;
	width: 987px;
	height: 48px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	background: url(../../images/topnav_stretch.gif) repeat-x;
	/*--top left rounded corner--*/
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;
	/*--Bottom right rounded corner--*/
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
#menu_houder ul.menu li {
	margin: 0; padding: 0;
	font-family:calibri, arial;
	font-size:19px;
	color:#fff;
	font-weight:bold;
	float: left;
}
#menu_houder ul.menu li a {
	padding: 10px 30px;
	display: block;
	color: #ffffff;
	height:27px;
	text-decoration: none;
}
#menu_houder ul.menu li:hover { 
        background: url(../../images/pijl.png) no-repeat;
	background-position: center top; 
	width:auto;
	/*--top left rounded corner--*/
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px; }

#menu_houder ul.menu li:active, #menu_houder ul.menu li.active, #menu_houder ul.menu li.subactive  { 
        background: url(../../images/pijl.png) no-repeat;
	background-position: center top; 
	width:auto;
	/*--top left rounded corner--*/
	border-top-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

#menu_houder ul.menu li ul {
	display:none;
	background:#dedede;
	z-index:2;
	font-family:arial;
	font-size:14px;
	color:#505050;
	margin:0px 0px 0px 0px;
	position: absolute;
	display: default; /*--Hide by default--*/
	width: auto;
	color: #fff;
	border: 1px solid #c3c3c3;
	/* for IE */
	filter:alpha(opacity=91);
	/* CSS3 standard */
	opacity:0.91;

	-moz-box-shadow: 4px 4px 6px #979797;
        -webkit-box-shadow: 4px 4px 6px #979797;
        box-shadow: 4px 4px 6px #979797;
        
        list-style-type:none;
        padding: 0;

}
#menu_houder ul.menu li ul li {
	font-size:12px;
	font-family:arial;
        float:none;
}

#menu_houder ul.menu li:hover ul {  
	display: block;
} 

/*--Show subnav on hover--*/
#menu_houder ul.menu li ul a {
	background:#dedede;
	padding:5px 15px;
	color:#505050;
	font-weight:normal;
	width:120px;
	height:auto;
}

 /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
#menu_houder ul.menu li ul a:hover {
	background: #ededed url(../../images/pijl-subnav.png) no-repeat;
	background-position: left center; 
	text-decoration: underline;
}

#menu_houder ul.menu li ul a:active {
	background: #edede url(../../images/pijl-subnav.png) no-repeat;
	background-position: left center; 
	text-decoration: underline;
}


#onderkantmenu{
	background: #dedede;
	height:30px;
	width:987px;
	float:left;
	margin:-6px 0px 0px 0px;
	/*--Bottom right rounded corner--*/
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}

Weten jullie hoe ik dit kan oplossen?

Alvast bedankt!

Laurens