如何创建：子导航

学习如何使用 CSS 创建子导航菜单。

创建子导航

第一步 - 添加 HTML：

<!-- 加载 Font Awesome 图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 导航菜单 -->
<div class="navbar">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#company">Company</a>
      <a href="#team">Team</a>
      <a href="#careers">Careers</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#bring">Bring</a>
      <a href="#deliver">Deliver</a>
      <a href="#package">Package</a>
      <a href="#express">Express</a>
    </div>
  </div>
  <div class="subnav">
    <button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
      <a href="#link4">Σύνδεσμος 4</a>
    </div>
  </div>
  <a href="#contact">Επικοινωνία</a>
</div>

Παράδειγμα περιήγησης:

Μπορείτε να χρησιμοποιήσετε οποιοδήποτε στοιχείο για να ανοίξετε το υποnavigate/drop-down μενού, όπως τα στοιχεία <button>, <a> ή <p>.

Χρησιμοποιήστε στοιχεία κάλυψης (όπως <div>) για τη δημιουργία του μενού υποnavigate και προσθέστε τους δεσμούς υποnavigate σε αυτό.

Χρησιμοποιήστε το στοιχείο <div> για να περιλαμβάνετε το κουμπί και το <div> για να χρησιμοποιήσετε σωστά την τοποθέτηση του μενού υποnavigate με CSS.

Δεύτερη στάση - Προσθήκη CSS:

/* Μενού πλοήγησης */
.navbar {
  περικοπή: κρυφή;
  βάθος χρώματος: #333;
}
/* Δεσμοί πλοήγησης */
.navbar a {
  πλεονέκτημα: αριστερά;
  尺码: 16px;
  χρώμα: λευκό;
  κατεύθυνση γραφής: κέντρο;
  πλαίσιο: 14px 16px;
  αποκάλυψη γραφικών: هیچ;
}
/* Μενού υποnavigate */
.subnav {
  πλεονέκτημα: αριστερά;
  περικοπή: κρυφή;
}
/* Κουμπί υποnavigate */
.subnav .subnavbtn {
  尺码: 16px;
  περίγραμμα: δεν υπάρχει;
  σχήμα: δεν υπάρχει;
  χρώμα: λευκό;
  πλαίσιο: 14px 16px;
  βάθος χρώματος: κληρονομημένο;
  οικογένεια γραμμάτων: κληρονομημένο;
  περιθώριο: 0;
}
/* Προσθέτει κόκκινο βάθος χρώματος όταν ο χρήστης επιλέξει το δεσμό πλοήγησης */
.navbar a:hover, .subnav:hover .subnavbtn {
  βάθος χρώματος: κόκκινο;
}
/* Ορίζει το στυλ του περιεχομένου υποnavigate - χρησιμοποιώντας αβιομηχανική τοποθέτηση */
.subnav-content {
  δείκτης: δεν φαίνεται;
  θέση: αβιομηχανική;
  αριστερά: 0;
  βάθος χρώματος: κόκκινο;
  πλάτος: 100%;
  είδος κατάταξης: 1;
}
/* Ορίζει το στυλ των δεσμών υποnavigate */
.subnav-content a {
  πλεονέκτημα: αριστερά;
  χρώμα: λευκό;
  αποκάλυψη γραφικών: هیچ;
}
/* Προσθέτει γκρι βάθος χρώματος όταν ο χρήστης επιλέξει */
.subnav-content a:hover {
  βάθος χρώματος: #eee;
  χρώμα: μαύρο;
}
/* Όταν ο χρήστης επιλέξει το κουτί υποnavigate, ανοίγει το περιεχόμενο υποnavigate */
.subnav:hover .subnav-content {
  display: block;
}

Προσπαθήστε το προσωπικά