webForumDet fria alternativet

CSS Horizontal transparent menu - IE7 problem

1 svar · 1 483 visningar · startad av empaempa

empaempaMedlem sedan sep. 20083 inlägg
#1

Jag vill ha en transparent undermeny, och under-under-meny. Det funkar jättebra i FF, men som vanligt är det IE7 som pajar (skippar IE6 just nu).

Ta en titt:
- Menyn: http://www.emperium.se/www/_menu/
- CSS: http://www.emperium.se/www/_menu/include/style.css
(ursäkta för att tabbningen ser skum ut, men den är snygg i Zend)

- Menu 1 är med vanlig undermeny. Inga problem där.
- Menu 2 har en underundermeny. Där vill inte IE7 visa den. Just nu visar den lite eftersom jag har en padding på första undermenyn.
- Menu 3 har en undermeny utan filter: alpha(opacity=70); och då kan den visa underundermenyn. Så det är filter-funktionen som spökar.

Är det något man kan göra åt det?

#menu ul {
	margin-top:			13px;		
	list-style-type: 		none;	
	
}

#menu li {	
	float: 			left;
	list-style-type: 		none;
	position:			relative;
	z-index:			400;
}

#menu a {	
	display:			block;	
	padding: 			7px 25px 7px 10px;			
	font-weight: 		bold;
	font-size:			13px;
	color: 			#005bab;	
	text-decoration:		none;
	background-image:	url('./../images/menu/menu_arrow.gif');
	background-repeat: 	no-repeat;
	background-position: 	center right;
}

#menu ul ul {	
	filter:			alpha(opacity=70);
	-moz-opacity:		0.7;
	-khtml-opacity: 		0.7;
	opacity: 			0.7;
	
	position:			absolute;
	z-index:			500;
	top:				auto;
	width:			200px;
	
	background:		red;
	margin:			0 50px 50px -50px;
	padding:			0 50px 50px 50px;
				
}

#menu ul.test {
	filter:				none;
 	background:		yellow; 
}

#menu ul ul ul {	
	position:			absolute;
	z-index:			6000;
	top:				0;
	left:				100%;	
	-moz-opacity:		1;
	-khtml-opacity: 		1;
	opacity: 			1;
	
	background:		#fff;
	
	margin-left:			0;
	padding-left:		0;
}

#menu a:hover, #menu a.active {	
	color:				#fff;
	background-color:	#005bab;	
	background-image:	url('./../images/menu/menu_arrow_active.gif');
	background-repeat: 	no-repeat;
	background-position: 	center right;
}

#menu ul ul a {
	font-weight:		normal;
	font-size:			10px;
	color: 			#fff;
	background-color:	#000;
	background-image:	url('./../images/menu/sub_dott.gif');
	background-repeat: 	no-repeat;
	background-position: 	center left;		
	padding-left:		25px;
	padding-right:		0px;	
}

#menu ul ul a:hover {	
	background-image:	url('./../images/menu/sub_dott.gif');
	background-repeat: 	no-repeat;
	background-position: 	center left;	
}

#menu ul ul a.childArrow {
	background-image:	url('./../images/menu/sub_dott_sub.gif');
	background-repeat: 	no-repeat;
	background-position: 	center right;
}

#menu ul ul li {		
	width: 			100%;		
}
 
#menu ul ul,
#menu ul li:hover ul ul,
#menu ul ul li:hover ul ul,
#menu ul ul ul li:hover ul ul
	{display: none;}
	
#menu ul li:hover ul,
#menu ul ul li:hover ul,
#menu ul ul ul li:hover ul,
#menu ul ul ul ul li:hover ul
	{ clear: left; display: block;}
empaempaMedlem sedan sep. 20083 inlägg
#2

Ingen lösning?

Genererad på 511 ms · cache AV · v20260730165559-full.f96bc7eb