Skapa en nedrullningsbar HTML‑meny och undermeny

Nedrullningsbara menyer, ofta kallade "suckerfish"‑menyer, bygger på en kombination av HTML‑listor och CSS‑stilar. Här får du en steg‑för‑steg‑guide med kodexempel.

Steg 1 – Skapa huvudmenyn i HTML

Använd <ul> och <li> för att definiera huvudmenyn:

<ul id="menu">
  <li><a href="#">Länk 1</a></li>
  <li><a href="#">Länk 2</a></li>
  <li><a href="#">Länk 3</a></li>
</ul>

För att bakgrunden ska sträcka sig under hela menyn kan du lägga till en .clearfix‑klass i slutet av listan.

Steg 2 – Lägg till en undermeny

Placera en ytterligare <ul> inuti ett <li>‑element:

<ul id="menu">
  <li><a href="#">Länk 1</a></li>
  <li><a href="#">Länk 2</a>
    <ul>
      <li><a href="#">Undermeny 1</a></li>
      <li><a href="#">Undermeny 2</a></li>
      <li><a href="#">Undermeny 3</a></li>
    </ul>
  </li>
  <li><a href="#">Länk 3</a></li>
</ul>

Steg 3 – Grundläggande CSS‑inställningar

Ta bort punkter och marginaler från huvudmenyn:

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

Steg 4 – Lägg till bakgrundsfärg

#menu {
  background-color: #001f3f; /* mörkblå */
}

Steg 5 – Justera menyelementen horisontellt

#menu li {
  float: left;
}

Steg 6 – Stilera länkarnas utseende

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

Steg 7 – Positionera undermenyn

#menu ul {
  position: absolute;
  list-style: none;
  padding: 0;
  background-color: #001f3f;
  display: none; /* göm submenyn */
}

Steg 8 – Ta bort vänsterjustering i undermenyn

#menu ul li {
  clear: left;
}

Steg 9 – Visa undermenyn vid hover

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

Lägg också till .clearfix‑regeln för att säkerställa att menyn rymmer alla element:

.clearfix { clear: both; }

Tips

• Använd hover‑effekter för att markera aktuellt menyobjekt. Exempel: #menu a:hover { background-color: #003366; }
• Efter att du har skapat menyn kan du använda ett jQuery‑plugin för att lägga till smidiga animationer.