Meniuri drop-down cu CSS

Voi spune de la inceput ca acest stil de meniu nu functioneaza pur CSS
decat in IE7. Este stiut faptul ca IE6 nu a implementat :hover decat
pentru elementul a. Dar nu fiti dezamagiti, exista un mic script java
care va rezolva problema, simuland :hover pentru alte elemente decat a,
in cazul nostru, li.


Iata meniul:

• Menu


• Style


• Menu
  
  
  
  • submenu
  
  
  • cool huh?
  
  
  
  


• Style

Ce este pe primul nivel al listei va fi in primul nivel al meniului, ce
este pe al doilea nivel (un ul in cadrul unui li) va fi pe al doilea
nivel. Din pacate inca nu-mi dau seama cum ar trebui sa fac sa
functioneze pe mai multe nivele.

Pentru a pozitiona submeniurile la locul lor, toate elementele li
trebuie sa fie afisate relativ la pozitia elementului imediat superior.
Doar astfel se vor putea aseza frumos langa parintele lor. Suna
complicat, insa este extrem de simplu:


ul li{
position:relative;
}




Acum, pentru a face submeniurile sa apara, va trebui ca intai sa le
ascundem. Totodata, sa le oferim si pozitionarea de care au nevoie.


li ul{
position: absolute;
left: 149px;
top: 0;
display: none;
}




Aceste reguli se aplica tuturor elementelor ul care sunt cuprinse in
elemente li: adica exact submeniurile. Pentru a le afisa ne este
necesara o singura regula aplicata la pseudo-clasa :hover a li-urilor:


li:hover ul{
display: block;
}



Regula spune browserului ca in momentul hoverului pe un element li,
elementul ul pe care acesta il contine va fi afisat ca un block.

Credeti ca am terminat, dar nu uitati ca IE6 face abstractie de la
reguli. Pentru a face meniul nostru sa functioneze perfect si in
versiunile de Explorer mai mici decat 7, avem nevoie de urmatorul
script (de remarcat ca Opera merge bine si fara). Pentru ca scriptul sa
functioneze, trebuie rulat la window.onload, iar ul-ul principal al
meniului trebuie sa aiba id-ul „nav”.



// Javascript Document
//(c)Patrick Griffiths and Dan Webb

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; inode = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Finish !