Bagaimana untuk melaksanakan kesan menu lungsur pada bar navigasi melalui CSS tulen

Cara mencapai kesan menu lungsur turun bar navigasi melalui CSS tulen

Dalam reka bentuk web, bar navigasi ialah komponen yang sangat biasa, dan menu lungsur adalah kesan biasa dalam bar navigasi. Dalam artikel ini, kita akan mempelajari cara melaksanakan kesan menu lungsur turun bar navigasi menggunakan CSS sahaja dan memberikan contoh kod terperinci.

Pertama, kami memerlukan struktur bar navigasi asas, seperti yang ditunjukkan di bawah:

<nav class="navbar">
  <ul class="nav-list">
    <li class="nav-item">首页</li>
    <li class="nav-item">产品</li>
    <li class="nav-item dropdown">
      <a href="#" class="dropdown-btn">服务</a>
      <ul class="dropdown-menu">
        <li><a href="#">服务一</a></li>
        <li><a href="#">服务二</a></li>
        <li><a href="#">服务三</a></li>
      </ul>
    </li>
    <li class="nav-item">关于我们</li>
    <li class="nav-item">联系我们</li>
  </ul>
</nav>

Dalam struktur ini, kami menggunakan elemen nav sebagai bekas bar navigasi, yang mengandungi The Elemen ul berfungsi sebagai bekas untuk item navigasi dan elemen li digunakan dalam setiap item navigasi. Untuk item navigasi yang mengandungi menu lungsur turun, kami menambah nama kelas khas dropdown dan elemen a untuk pencetus menu lungsur. nav元素作为导航栏的容器，内部包含一个ul元素作为导航项目的容器，并在每个导航项目中使用li元素。对于包含下拉菜单的导航项目，我们给其添加一个特殊的类名dropdown，以及一个下拉菜单触发器的a元素。

接下来，我们使用CSS来实现下拉菜单的效果，具体代码如下：

.navbar {
  background-color: #f0f0f0;
  padding: 10px;
}

.nav-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  margin-right: 10px;
}

.dropdown {
  position: relative;
}

.dropdown > .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #f0f0f0;
}

.dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-menu li {
  padding: 5px;
}

.dropdown-menu a {
  color: #333;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color: #ccc;
}

在这段CSS代码中，我们首先对导航栏的样式进行了设置。接着，我们对下拉菜单的样式进行设置。首先，我们将下拉菜单的display属性设置为none，使其默认不可见。然后，通过.dropdown:hover > .dropdown-menu选择器，当鼠标悬停在包含下拉菜单的导航项目上时，将下拉菜单的display属性设置为block

rrreee

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kesan menu lungsur pada bar navigasi melalui CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!