Mehrstufiges Dropdown-Menü in reinem CSS: Eine umfassende Anleitung

Mehrstufige Dropdown-Menüs, ein wichtiges Element in der Webnavigation, k?nnen elegant gestaltet werden mit reinem CSS. Obwohl es online verschiedene Ans?tze gibt, untersuchen wir die modernste und effizienteste Methode, um diese Funktionalit?t zu erreichen.

Der CSS-Code

Der folgende CSS-Code erstellt ein dreistufiges Dropdown-Menü mit verschachtelten ungeordneten Elementen Listen und subtile Hover-Effekte.

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu > li {
  height: 30px;
  background: #999999;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}

.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #CCCCCC;
}

.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  width: 150px;
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}

.top-level-menu li:hover > ul {
  /* Display the next level's menu on hover */
  display: inline;
}

/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */ {
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;

  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}

Die HTML-Struktur

Der folgende HTML-Code definiert ein mehrstufiges Dropdown-Menü mit drei Ebenen mit Links zu verschiedenen Seiten.

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein reines CSS-Dropdown-Menü mit mehreren Ebenen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!