Cum să construiești un meniu HTML cu submeniuri drop-down

Menierile drop-down, cunoscute și sub numele de "suckerfish", combină HTML și CSS pentru a oferi o structură și un design atractiv. În HTML, meniul este construit din liste neordonate (<ul>) și elemente de listă (<li>), iar în CSS se stilizează bara de meniu, legăturile principale și submeniurile ascunse. Selectorul :hover permite afișarea submeniului atunci când utilizatorul trece cursorul peste elementul părinte.

Pasul 1

Codifică meniul în HTML folosind etichetele <ul> și <li>:

<ul id="menu">
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
</ul>

Adaugă un div cu clasa clearfix înainte de închiderea listei pentru a asigura extinderea fundalului.

Pasul 2

Inserează submeniul ca listă neordonată imbricat în elementul <li> corespunzător:

<ul id="menu">
  <li>Link 1</li>
  <li>Link 2
    <ul>
      <li>SubLink 1</li>
      <li>SubLink 2</li>
      <li>SubLink 3</li>
    </ul>
  </li>
  <li>Link 3</li>
</ul>

Pasul 3

Deschide fișierul CSS și elimină punctele și indentarea din meniul principal:

#menu {
  list-style: none;
  padding: 0;
}

Pasul 4

Adaugă culoarea de fundal pentru bara de meniu:

#menu {
  list-style: none;
  padding: 0;
  background-color: #003366;
}

Pasul 5

Alinierea orizontală a elementelor se obține prin flotarea spre stânga:

#menu li {
  float: left;
}

Pasul 6

Stilizează legăturile meniului pentru a facilita navigarea:

#menu li a {
  display: block;
  padding: 8px 15px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

Pasul 7

Stilizează submeniul și poziționează-l absolut:

#menu ul {
  position: absolute;
  list-style: none;
  padding: 0;
  background-color: #004080;
  display: none;
}

Pasul 8

Înlătură flotarea din elementele submeniului:

#menu ul li {
  clear: left;
}

Pasul 9

Arată submeniul la hover:

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

Adaugă regulă de clearfix:

.clearfix { clear: both; }

Sfat

• Adaugă evidențiere pentru elementele meniului la hover:

#menu a:hover {
  background-color: #0059b3;
}

• După finalizare, poți integra un plugin jQuery pentru animații mai sofisticate ale drop-down-urilor.