Menu a tendina CSS problema strano

[Crashtest]

Sono alle prime armi con la costruzione con soli CSS. Sto modificando un menu a tendina verticale con menu, submenu e subsubmenu, reperito in internet, per arrivare al risultato che trovate qui (non fate caso ai colori, li uso così per raccappezzarmi )

http://www.gianfranco.roma.it/test.htm

Se andate in mouse over su Publications/Tutorials, noterete che in firefox si apre regolarmente un ulteriore submenu con sfondo giallo, cosa che non succede in IE.

Dopo una nottata di impazzimento ho capito che il problema si presenta non appena inserisco la trasparenza del background dell'ul.level2, cosa che faccio con il codice:

filter: alpha(opacity=80);
-moz-opacity:0.8;
opacity:0.8;

Insomma, appena metto la trasparenza, l'hover che causa l'apertura dell'ulteriore submenu fa cilecca in IE. Ho anche installato l'IE7 patch ma niente. Qualcuno può aiutarmi?

Il CSS lo potete ottenere visualizzando l'html, il behavior csshover.htc eccolo:

<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
* HOVER - V1.00.031224 - whatever:hover in IE
* ---------------------------------------------
* Peterned - http://www.xs4all.nl/~peterned/
* (c) 2003 - Peter Nederlof
*
* howto: body { behavior:url("csshover.htc"); }
* ---------------------------------------------
*/

var CSSBuffer, doc = window.document;

function parseStylesheets() {
var rules, sheet, sheets = doc.styleSheets;
var bufferIndex = sheets.length;
var head = doc.getElementsByTagName('head')[0];
var buffer = doc.createElement('style');

buffer.setAttribute('media', 'screen');
buffer.setAttribute('type', 'text/css');
head.appendChild(buffer);
CSSBuffer = sheets[bufferIndex];

for(var i=0; i<sheets.length -1; i++) {
sheet = sheets[i];
if(!sheet.media || sheet.media == 'screen') {
rules = sheet.rules;
for(var j=0; j<rules.length; j++) {
parseCSSRule(rules[j]);
}
}
}
}
function parseCSSRule(rule) {
var select = rule.selectorText, style = rule.style.cssText;
if(!select || !style || select.indexOf(':hover') < 0) return;
var newSelect = select.replace(/\:hover/g, '.onHover');
CSSBuffer.addRule(newSelect, style);

var affected = select.replace(/\:hover.*$/g, '');
var elements = getElementsBySelect(affected);
for(var i=0; i<elements.length; i++) {
if(elements[i].nodeName == 'A') continue;
new HoverElement(elements[i]);
}
}

/**
* HoverElement
* -------------------------
* applies the hover
*/

function HoverElement(element) {
if(element.isHoverElement) return;
element.isHoverElement = true;
element.attachEvent('onmouseover',
function() { element.className += ' onHover'; });

element.attachEvent('onmouseout',
function() { element.className = element.className.replace(/onHover/g, ''); });
}

/**
* domFinder
* -----------------------------------
* returns list of elements based on css selector
*/

function getElementsBySelect(rule) {
var nodeList = [doc], sets = rule.split(' ');
for(var i=0; i<sets.length; i++) {
nodeList = domFinder.filterNodes(sets[i], nodeList);
} return nodeList;
}

var domFinder = {
findNodes:function(tag, docs) {
var res, nodes = [];
for(var i=0; i<docs.length; i++) {
res = docs[i].getElementsByTagName(tag);
for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
} return nodes;
},

filterNodes:function(select, docs) {
var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
if(!s) return this.findNodes(select, docs);
nodes = this.findNodes((rule = select.split(s))[0], docs);
atr = (s == '#')? 'id':'className';
for(var i=0; i<nodes.length; i++) {
if(new RegExp('(^|\\s)' + rule[1] + '(\\s|$)').exec(nodes[i][atr]))
filtered[filtered.length] = nodes[i];
} return filtered;
}
}
</script>

[andrea.paiola]

il codice che usi per l'opacità non è standard... probabilmente dipende da quello...
ps: mi sa che devi aspettare CSS 3 non esiste codice standard per l'opacità in CSS 2

[Crashtest]

e non essendo standard è normale che in firefox funzioni perfettamente?

[andrea.paiola]

si funziona solo con mozilla e derivati (e Firefox deriva da Mozilla)

[Crashtest]

scusami ma, dopo aver visto questo:

http://iubito.free.fr/prog/menu/transparent.htm

penso sempre di più che la soluzione ci sia, o nel css o nel behavior. Come vedi, andando col mouse sui tre tasti in alto, che hanno la trasparenza del background, i sottostanti menu a discesa si aprono regolarmente. E il codice usato per ottenere la trasparenza è esattamente quello che ho usato io.
A questo punto lo sto solo gestendo in modo non corretto, con qualche errore che sta altrove...

[andrea.paiola]

bè copia il codice da loro no?
comunque al momento non esistono soluzioni standard per la trasparenza (se non immagini di sfondo con trasparenza... i png andrebbero benissimo se IE li supportasse adeguatamente)
quella soluzione funziona solo con Mozilla e derivati e IE

[Crashtest]

Originariamente inviato da andrea.paiola
bè copia il codice da loro no?

Credi non ci abbia pensato? Solo che non vedo come fare per poter gestire un ulteriore submenu (lì ne gestiscono solo uno), c'è javascript e io non è che sia in grado di gestire javascript, mo' mi ci metto un'altra nottata (se tutto va bene). La cosa che però mi fa impazzire è che alla fine scoprirò che era una scemenzuola nel mio CSS...

[Crashtest]

Come non detto, nella pagina di istruzioni c'è scritto:

Limitations du script :
il ne peut pas y avoir de sous-menus dans les sous-menus. Mais à côté des gros avantages qu'il possède, ce n'est rien.

[Crashtest]

Ovviamente, non so se sono stato chiaro, questo:

Limitations du script :
il ne peut pas y avoir de sous-menus dans les sous-menus. Mais à côté des gros avantages qu'il possède, ce n'est rien.

è riferito al secondo codice che ho linkato, su quello da me utilizzato non c'erano controindicazioni del genere.