So implementieren Sie mit CSS3 ein Navigations-Dropdown-Menü (vollständiger Code im Anhang)

In der aktuellen Webseitenstruktur nimmt die Navigationsmenüleiste eine sehr wichtige Position ein, da sie nicht nur Beispiele anzeigen kann, sondern Ihnen auch den intuitivsten Eindruck vom Inhalt vermittelt. Wie wir alle wissen, ist in HTML

< ;li>

Das Menü kann abgestuft werden, dann können wir mit CSS3 zusammenarbeiten, um das Navigations-Dropdown-Menü zu implementieren. In diesem Artikel geht es um die Verwendung von CSS3 zur Implementierung eines Navigations-Dropdown-Menüs. Ich hoffe, dass er für Freunde hilfreich ist.

Das Prinzip der Verwendung von CSS3 zum Implementieren des Navigations-Dropdown-Menüs

Verwenden Sie zunächst das

• Um das Menü zu erstellen, verwenden wir eine Hover-Anweisung, das heißt, wenn sich die Maus in einem bestimmten Bereich befindet, wird die Anzeige des Menüs der unteren Ebene ausgelöst know ist das Anzeigeattribut. Die Eigenschaften von block und none werden zum Ein- und Ausblenden des Dropdown-Menüs verwendet. Dann definieren wir die Position für jedes Menü, um die Position des Menüs zu bestimmen, und verwenden schließlich den Pseudoelementselektor ::after, um den Float zu löschen.

  Schritte zur Verwendung von CSS3 zum Implementieren des Navigations-Dropdown-Menüs

  Schritt 1: Verwenden Sie HTML, um einen Menüstil zu erstellen

  <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>

  Schritt 2: Verwenden Sie CSS3, um ein Drop-Down-Menü zu implementieren, das per Mauszeiger ausgelöst wird
  

  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%;
  }

  Schritt 3: Verschönern Sie es entsprechend die Anforderungen des Menüstils
  

  Der Dropdown-Menüstil ist wie im Bild gezeigt

  

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit CSS3 ein Navigations-Dropdown-Menü (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!