Comment utiliser CSS3 pour implémenter un menu déroulant de navigation (code complet ci-joint)

Dans la structure actuelle des pages Web, la barre de menus de navigation occupe une position très importante, car elle peut non seulement afficher des exemples, mais également vous donner l'impression la plus intuitive du contenu. Comme nous le savons tous, en HTML

< ;li>

Le principe de l'utilisation de CSS3 pour implémenter le menu déroulant de navigation

Tout d'abord, utilisez le

• Pour créer le menu, nous utiliserons une instruction de survol, c'est-à-dire que lorsque la souris survole une certaine zone, elle déclenchera l'affichage du menu de niveau inférieur. Know est l'attribut display. Nous utiliserons les propriétés de block et none pour afficher et masquer le menu déroulant. Ensuite, nous définirons la position de chaque menu pour déterminer l'emplacement du menu, et enfin utiliserons le sélecteur de pseudo-élément ::after pour effacer le flottant.

  Étapes pour utiliser CSS3 pour implémenter le menu déroulant de navigation

  Étape 1 : Utiliser HTML pour créer un style de menu

  <nav>
          <ul>
              <li><a href="#">导航一</a>
                  <ul>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                  </ul>
              </li>
              <li><a href="#">导航二</a></li>
              <li><a href="#">导航三</a>
                  <ul>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a>
                          <ul>
                              <li><a href="#">三级导航</a></li>
                              <li><a href="#">三级导航</a></li>
                              <li><a href="#">三级导航</a></li>
                          </ul>
                      </li>
                      <li><a href="#">二级导航</a></li>
                  </ul>
              </li>
              <li><a href="#">导航四</a>
                  <ul>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                  </ul>
              </li>
              <li><a href="#">导航五</a>
                  <ul>
                      <li><a href="#">二级导航</a></li>
                      <li><a href="#">二级导航</a></li>
                  </ul> 
              </li>
              <li><a href="#">导航六</a></li>
          </ul>
      </nav>

  Copier après la connexion

  Étape 2 : Utilisez CSS3 pour implémenter un menu déroulant déclenché par le survol de la souris
  

  nav {
      margin:100px auto;
      text-align:center;
  }
  nav ul {
      border-radius:10px;
      background:linear-gradient(to bottom,#efefef,#bbbbbb);
      padding:0 20px;
      display:inline-table;
      position:relative;  
      box-shadow:1px 1px 3px #666;
  }
  nav ul ul {
      display:none;
  }
  nav ul li {
      float:left; 
  }
  nav ul::after {
      content:"";
      display:block;
      clear:both;
  }
  nav ul li a {
      display:block;
      padding:25px 40px;
      color:#000;
      text-decoration:none;
      font-family:"微软雅黑";
  }
  nav ul li:hover > ul {
      display:block;
  }
  nav ul li:hover {
      background:linear-gradient(to bottom,#4f5964,#5f6975);
  }
  nav ul li:hover a {
      color:#FFF;
  }
  nav ul ul {
      background:#5f6975;
      border-radius:0;
      position:absolute;
      top:100%;
      padding:0;
  }
  nav ul ul li {
      float:none;
      border-top:1px solid #6b727c;
      border-bottom:1px solid #575f6a;
  }
  nav ul ul li a {
      color:#FFF;
  }   
  nav ul ul li a:hover {
      background:#4b545f;
  }
  nav ul ul ul {
      width:100%;
      position:absolute;
      left:100%;
      top:50%;
  }

  Copier après la connexion

  Étape 3 : Embellissez-le selon les exigences du style du menu
  

  Le style du menu déroulant est comme indiqué sur l'image

  

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!