Crearea foii de stil

Dacă doriți ca meniul să meargă într-un fișier HTML stand-alone, trebuie să faceți un spațiu între etichete și locul în care va merge codul CSS. Scrieți următoarele în fișierul dvs.

Spațiul dintre aceste două etichete este foaia dvs. de stil. Dacă utilizați un fișier CSS separat, adăugați următoarele undeva în etichetele "head":

Apoi creați un fișier numit "style.css", care va fi foaia dvs. de stil. Păstrați foaia de stil în același director ca și fișierul HTML principal.

Crearea meniului

Trebuie să creați o etichetă care să conțină meniul pentru a intra în ele. Adăugați următoarele în pagina dvs. HTML în locul în care doriți să mergeți:

Apoi trebuie să definiți separatorul de meniuri. Adăugați următorul cod în foaia de stil:

meniul {

lățime: 200px; }

Adăugați la această intrare orice alt stil CSS pe care doriți să îl aibă divizorul; de exemplu, o culoare de fundal, margini sau o dimensiune diferită.

Marcaj HTML

Adăugați codul pentru meniu. Meniul va utiliza o listă neordonată:

. Adăugați următorul cod între etichetele pentru meniul dvs.
• Elementul de meniu 1
  • Elementul 1 submeniu
  • Elementul 2 submeniu

Rețineți etichetele

din submeniuri se află între etichete
• și
pentru "Elementul 1 al meniului". Acest lucru spune browser-ului că sub-meniul este conținut sub acel element de meniu. Adaptați codul de mai sus pentru a reprezenta propriul meniu, adăugând propriile dvs. adrese URL și submeniuri suplimentare, dacă este necesar

Stil CSS

În acest moment, meniul va apărea, dar sub-meniul va fi afișat întotdeauna. Trebuie doar să utilizați atributul "afișare" pentru a ascunde și a dezvălui submeniul. Adăugați următoarele în foaia de stil:

meniul li {position: relative;}

meniu ul ul {

poziția: absolută; top: 0; stânga: 100%; lățime: 100px; } div # meniu ul ul {display: none;} div # meniu ul li: hover ul {afișare: bloc;}

Salvați toate fișierele. Meniu derulant este gata.

referințe

• Tanfa.co.uk: CSS Pop-Out Meniu Tutorial (CSS meniu drop-down tutorial)

Mai multe articole

• Cum se face un meniu drop-down orizontal în HTML
• Cum să eliminați toate stilurile CSS pentru un individ DIV
• Cum de a reduce spațiul dintre linii în HTML
• Cum se introduc două imagini pe orizontală cu HTML
• Cum să suprascrieți CSS în cadrul claselor DIV
• Cum să ancorați un DIV în partea de jos a unei pagini
• Cum se face o linie verticală care separă textul HTML de o imagine