Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat CSS Tulen?

Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat CSS Tulen?

Susan Sarandon
Susan Sarandonasal
2024-12-11 14:10:11938semak imbas

How to Create a Pure CSS Multi-Level Dropdown Menu?

Menu Turun Berbilang Peringkat CSS Tulen: Panduan Komprehensif

Menu lungsur turun berbilang peringkat, elemen penting dalam navigasi web, boleh direka dengan elegan menggunakan CSS tulen. Walaupun pelbagai pendekatan wujud dalam talian, kami meneroka kaedah yang paling moden dan cekap untuk mencapai fungsi ini.

Kod CSS

Kod CSS di bawah mencipta menu lungsur turun tiga peringkat dengan tidak tertib bersarang senarai dan kesan tuding halus.

.third-level-menu {
  position: absolute;
  top: 0;
  right: -150px;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.third-level-menu > li {
  height: 30px;
  background: #999999;
}
.third-level-menu > li:hover {
  background: #CCCCCC;
}

.second-level-menu {
  position: absolute;
  top: 30px;
  left: 0;
  width: 150px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: none;
}

.second-level-menu > li {
  position: relative;
  height: 30px;
  background: #999999;
}
.second-level-menu > li:hover {
  background: #CCCCCC;
}

.top-level-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.top-level-menu > li {
  position: relative;
  float: left;
  height: 30px;
  width: 150px;
  background: #999999;
}
.top-level-menu > li:hover {
  background: #CCCCCC;
}

.top-level-menu li:hover > ul {
  /* Display the next level's menu on hover */
  display: inline;
}

/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */ {
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0 0 0 10px;

  /* Make the link cover the entire list item-container */
  display: block;
  line-height: 30px;
}
.top-level-menu a:hover {
  color: #000000;
}

Struktur HTML

Kod HTML di bawah mentakrifkan menu lungsur turun berbilang peringkat tiga peringkat dengan pautan ke pelbagai halaman.

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Menu Jatuh Turun Berbilang Peringkat CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn