Dropdown mit eigenem Link (nur css + html)

[marctrix]

Hej diviti,

Beim Dropdown-Menü möchte ich auch das Parent-Element (also den Dropdown-Button) mit einem Link auf "seite2.html" versehen.

Hier der Ausschnitt aus der HTML-Datei:

    <nav class="topnav">
      <a href="seite1.htm">Seite 1</a>
      <nav class="dropdown">
        <button class="dropbtn">Seite 2<i class="fa fa-caret-down"></i></button>
        <nav class="dropdown-content">
          <a href=link1.htm>Link 1</a>
          <a href=link2.htm>Link 2</a>
        </nav>
      </nav>
      <a href="seite3">Seite 3</a>
    </nav> 

Hmm - wo ist das Problem, statt button einfach a zu nehmen?

Davon abgesehen verwendest du das nav-Element nicht korrekt. So kann man das leider nciht einsetzen. Es ist ein Container für die Hauptnavigation, in der Regel benötigst du daher auch keine Klasse wie topnav, weil die Mehrzahl der Seiten nur eine Hauptnavigation hat.

Darin solltest du die Links dann in einer verschachtelten ul organisieren.

Ich persönlich würde übrigens auf presentational Markup <i class="fa fa-caret-down"></i>verzichten und es gibt viele Gründe für SVGs statt Icon-Fonts.

Die Macher von Fontawesome wissen das natürlich auch und darum bieten die auch die Möglichkeit, SVG-Sprites statt die Font-Variante zu nehmen.

Marc