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;}