Aktívna oblasť CSS menu

Robím grafický návrh, ktorý obsahuje vertikálne menu s vysúvacími subpoložkami a samozrejme je riešené pomocou CSS. Veľký problém CSS menu je v tom, že sa okamžite skryjú, pokiaľ sa myš dostane mimo elementu. Je teda potrebné túto aktívnu oblasť zväčšiť. Oblasť je však potrebné zväčšiť tak, že ju nebude vidieť a nebude zakrývať obsah.

Menu je klasicky riešené pomocou <ul> a subpoložky sú absolútne poziciované v rámci rodičovského <li>. Ako teda zväčšíme aktívnu oblasť? Zväčšíme okraje <ul> pomocou padding.

#menu li  {
        position: relative;
}

#menu li ul {
        display: none;
        position: absolute;
        left: -10px;
        padding: 5px 10px 20px; /* z bokov 10px a z dola 20px oblasť */
        background: transparent; /* oblasť musí presvitať */
}

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

#menu li ul li {
        background: white; /* subpoložky nebudú presvitať */
}

Spásna myšlienka, ale treba to ešte odladiť pre IE. Kde je problém? Ak <ul> má transparentné pozadie (čo je princíp funkčnosti aktívneho okraja – nesmi byť vidieť), môžeme mu zväčšovať padding koľko len chceme, IE zruší :hover okamžite, ako sa myš dostane mimo vnútornú oblasť prvku (oblasť medzi paddingom.

IE našťastie „rozšíri oblasť“, pokiaľ je nastavená ľubovoľná farba pozadia. Okrem priesvitnosti… Mal som chybný nápad – nastaviť farbu pozadia a použiť transparentný GIF. Obrázok je však aplikovaný nad farebnou výplňou, teda stále bolo oblasť vidieť.

Posledný výstrel do vzduchu: transparentné pozadie s nastaveným prehliadným obrázkom. Heuréka!!! V IE je aktívna oblasť priesvitná!

Výsledný kód pre IE:

#menu li ul {
        background: transparent url("/images/blank.gif");
}

Toto bolo riešenie chyby v IE s obtiažnosťou 1. Odstránenie ďalšej chyby v najrozšírenejšom a najhoršom prehliadači Microsoft Internet Explorer trvalo 20 minút. (Okrem pozadia som skúšal kombinovať margin/padding na <ul>, <li> a ďalšie iné triky.) Na záver článku sa chcem poďakovať veľkému bratovi z Redmontu, že vďaka jeho neschopnosti zvyšuje náklady na vývoj webových stránok. A už sa teším na ďalšie chyby, ktoré bude treba odlaďovať celý víkend >:o.