Ein Beispiel erklärt, wie man ein sekundäres Menü mit reinem CSS implementiert

Da Websites immer komplexer werden, werden Navigationsleisten immer wichtiger. Das sekundäre Menü ist ein übliches Navigationsleistendesign, das Benutzern mehr Auswahlmöglichkeiten bietet und die Benutzerfreundlichkeit und Anpassungsfähigkeit der Website erhöht. Daher ist es beim Erstellen einer Website wichtig, ein einfaches und benutzerfreundliches Sekundärmenü zu implementieren. In diesem Artikel erfahren Sie, wie Sie mithilfe von CSS ein sekundäres Menü implementieren.

1. HTML-Strukturdesign

Zunächst müssen wir die Struktur der Navigationsleiste in HTML einrichten, was für die Implementierung von CSS sehr wichtig ist.

Die HTML-Struktur einer einfachen Navigationsleiste ist wie folgt:

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>Services ▼</a>
      <ul>
        <li><a>Web Design</a></li>
        <li><a>Web Development</a></li>
        <li><a>SEO</a></li>
      </ul>
    </li>
    <li><a>About Us</a></li>
    <li><a>Contact Us</a></li>
  </ul>
</nav>

Diese Struktur enthält ein nav-Element und ein ul-Element. Das Element nav umschließt die gesamte Navigationsleiste, während das Element ul jeden einzelnen Link in der Navigationsleiste sowie Links enthält, die sekundäre Menüs enthalten. nav元素和一个ul元素。nav元素包裹着完整的导航栏，而ul元素包含着导航栏的每个单独的链接，以及包含二级菜单的链接。

注意到第二个li元素包含一个ul元素，这个元素就是二级菜单的容器。我们将在下面的步骤中为这个容器添加样式。

2. CSS样式设计

接下来，我们需要为这个导航栏设置CSS样式，以实现二级菜单。在下面的代码中，我们将首先去掉默认样式，并给所有链接设置以下样式：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

这一块代码包含了以下几个部分：

• 我们首先去掉了默认的样式，并设置了所有链接的基本样式。
• 接下来，我们为所有的li元素设置position: relative;，以便相对于它的子元素定位。这意味着我们可以通过子元素来实现其定位。
• 每个二级菜单用一个单独的ul元素来包含，我们为这些ul元素设置了一些基本的样式，例如定位以及不可见。
• 最后，我们添加了鼠标悬浮的效果。当鼠标悬浮在一个li
Beachten Sie, dass das zweite li-Element ein ul-Element enthält, das den Container des sekundären Menüs darstellt. In den nächsten Schritten werden wir diesem Container Stile hinzufügen.

CSS-Stildesign
Als nächstes müssen wir den CSS-Stil für diese Navigationsleiste festlegen, um das sekundäre Menü zu implementieren. Im folgenden Code entfernen wir zunächst den Standardstil und legen den folgenden Stil für alle Links fest:

<nav>
  <ul>
    <li><a>Home</a></li>
    <li>
      <a>Services ▼</a>
      <ul>
        <li><a>Web Design</a></li>
        <li><a>Web Development</a></li>
        <li><a>SEO</a></li>
      </ul>
    </li>
    <li><a>About Us</a></li>
    <li><a>Contact Us</a></li>
  </ul>
</nav>

Dieser Codeblock enthält die folgenden Teile:

• Wir entfernen zunächst den Standardstil und legen den Basisstil für fest alle Links.
Als nächstes legen wir position: relative; für alle li-Elemente fest, sodass sie relativ zu ihren untergeordneten Elementen positioniert sind. Das bedeutet, dass wir es über untergeordnete Elemente positionieren können.
Jedes sekundäre Menü ist in einem separaten ul-Element enthalten. Wir legen einige grundlegende Stile für diese ul-Elemente fest, wie z. B. Positionierung und Unsichtbarkeit. 🎜🎜Zuletzt haben wir den Maus-Hover-Effekt hinzugefügt. Wenn die Maus über ein li-Element fährt, ändern wir die Sichtbarkeit seiner untergeordneten Elemente in „sichtbar“. Wenn sich die Maus über dem sekundären Menü bewegt, ändern wir die Sichtbarkeit des Menüs selbst und seiner untergeordneten Elemente auf „sichtbar“. Das heißt, wenn sich die Maus über der Navigationsleiste befindet, werden alle sekundären Menüs im angezeigten Zustand gerendert. 🎜🎜🎜🎜Vollständiges Codebeispiel🎜🎜🎜Abschließend sieht unser vollständiger HTML- und CSS-Code so aus: 🎜

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  position: relative;
}

nav a {
  display: block;
  padding: 0.5em;
  color: #000;
  text-decoration: none;
  font-size: 1.2em;
}

nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  background-color: #fff;
}

nav ul ul li {
  float: none;
  width: 100%;
}

nav li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
}

nav ul ul ul {
  top: 0;
  left: 100%;
}

rrreee🎜🎜Fazit🎜🎜🎜In diesem Beitrag haben wir gelernt, wie man ein sekundäres Menü mit CSS implementiert. Wir erläutern die HTML-Struktur und den CSS-Code und stellen ein vollständiges Beispiel zur Verfügung, um den Lesern ein besseres Verständnis dieser Technik zu erleichtern. Ich hoffe, dieser Artikel hilft Ihnen! 🎜

Das obige ist der detaillierte Inhalt vonEin Beispiel erklärt, wie man ein sekundäres Menü mit reinem CSS implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!