Demo

Schaut Euch die Demo und den Source-Code an! Ihr könnt Euch auch das ganze Paket herunterladen!

HTML

<nav>
    <img src="p/burger.svg" alt="Menü-Icon">
    <ul>
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Über mich</a></li>
      <li><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

nav {
  position: relative; /* Elternelement */
  width:36px; /* so breit wie das Burger-Icon sein soll */
}

nav img {
  width: 100%;
  height: auto;
}

nav ul {
  …

  /* Position des Menüs in Beziehung auf Burger-Icons */
  position: absolute;
  left: 10px;
  top: 10px;

  /* Menü anfangs unsichtbar */
  display:none;
}

nav:hover ul {
  /* Hovert man über das Burger-Icon, wird das Menü sichtbar */
  display: block;
}