Un exemple explique comment implémenter un menu secondaire en utilisant du CSS pur

À mesure que les sites Web deviennent plus complexes, les barres de navigation deviennent de plus en plus importantes. Le menu secondaire est une conception de barre de navigation courante qui peut offrir aux utilisateurs plus de choix et augmenter la convivialité et l'adaptabilité du site Web. Par conséquent, lors du processus de création d’un site Web, il est essentiel de mettre en place un menu secondaire simple et facile à utiliser. Dans cet article, nous apprendrons comment implémenter un menu secondaire en utilisant CSS.

1. Conception de la structure HTML

Tout d'abord, nous devons mettre en place la structure de la barre de navigation en HTML, ce qui est très important pour l'implémentation du CSS.

La structure HTML d'une barre de navigation simple est la suivante :

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Cette structure contient un élément nav et un élément ul. L'élément nav enveloppe la barre de navigation complète, tandis que l'élément ul contient chaque lien individuel dans la barre de navigation, ainsi que les liens contenant des menus secondaires. 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
Notez que le deuxième élément li contient un élément ul, qui est le conteneur du menu secondaire. Nous ajouterons des styles à ce conteneur dans les prochaines étapes.

Conception du style CSS
Ensuite, nous devons définir le style CSS pour cette barre de navigation afin d'implémenter le menu secondaire. Dans le code ci-dessous, nous allons d'abord supprimer le style par défaut et définir le style suivant pour tous les liens :

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Web Development</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

Ce bloc de code contient les parties suivantes :

• Nous allons d'abord supprimer le style par défaut et définir le style Basic pour tous les liens.
Ensuite, nous définissons position: relative; pour tous les éléments li afin qu'ils soient positionnés par rapport à ses éléments enfants. Cela signifie que nous pouvons le positionner via des éléments enfants.
Chaque menu secondaire est contenu par un élément ul distinct. Nous définissons certains styles de base pour ces éléments ul, tels que le positionnement et l'invisibilité. 🎜🎜Enfin, nous avons ajouté l'effet de survol de la souris. Lorsque la souris survole un élément li, nous changeons la visibilité de ses éléments enfants en visible. Lorsque la souris survole le menu secondaire, nous changeons la visibilité de lui-même et de ses éléments enfants en visible. Autrement dit, chaque fois que la souris survole la barre de navigation, tous les menus secondaires seront présentés dans l'état affiché. 🎜🎜🎜🎜Exemple de code complet🎜🎜🎜Enfin, notre code HTML et CSS complet ressemblera à ceci : 🎜

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🎜🎜Conclusion🎜🎜🎜Dans cet article, nous avons appris comment implémenter un menu secondaire en utilisant CSS. Nous expliquons la structure HTML et le code CSS et fournissons un exemple complet pour aider les lecteurs à mieux comprendre cette technique. J'espère que cet article vous aidera ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!