如何创建：子导航

学习如何使用 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">Link 4</a>
    </div>
  </div>
  <a href="#contact">Hubungi</a>
</div>

Pengelakuan contoh:

Bisa digunakan elemen apapun untuk membuka navigasi bawah/drop-down menu, seperti elemen <button>, <a> atau <p>.

Buat menu navigasi bawah menggunakan elemen pemuat (seperti <div>) dan tambahkan pautan navigasi bawah didalamnya.

Gunakan elemen <div> untuk melindungi tombol dan <div> untuk memastikan pemuat navigasi bawah dapat ditempatkan dengan benar dengan CSS.

Langkah kedua - Tambahkan CSS:

/* Menu navigasi */
.navbar {
  kelebaran: tak terbatas;
  warna latar: #333;
}
/* Pautan navigasi */
.navbar a {
  gerak: kiri;
  ukuran huruf: 16px;
  warna: putih;
  telajui teks: tengah;
  jarak: 14px 16px;
  tatabahasa: tak ada;
}
/* Menu navigasi bawah */
.subnav {
  gerak: kiri;
  kelebaran: tak terbatas;
}
/* Tombol navigasi bawah */
.subnav .subnavbtn {
  ukuran huruf: 16px;
  sambungan: tak ada;
  garis: tak ada;
  warna: putih;
  jarak: 14px 16px;
  warna latar: warisan;
  keluarga huruf: warisan;
  marjin: 0;
}
/* Menambah warna latar merah ke pautan navigasi semasa kursor berada di atas */
.navbar a:hover, .subnav:hover .subnavbtn {
  warna latar: merah;
}
/* Tetapkan gaya kandungan navigasi bawah - gunakan penempatan absolut */
.subnav-content {
  display: tak terlihat;
  posisi: absolut;
  kiri: 0;
  warna latar: merah;
  lebar: 100%;
  z-index: 1;
}
/* Tetapkan gaya pautan navigasi bawah */
.subnav-content a {
  gerak: kiri;
  warna: putih;
  tatabahasa: tak ada;
}
/* Menambah warna latar abu-abu semasa kursor berada di atas */
.subnav-content a:hover {
  warna latar: #eee;
  warna: hitam;
}
/* Semasa anda menempah kursor di atas kontainer pemuat navigasi, buka kandungan navigasi */
.subnav:hover .subnav-content {
  display: block;
}

亲自试一试