W3.CSS 下拉菜单

W3.CSS是一种简单易学且功能强大的CSS框架，其中包含了许多实用的组件，如下拉菜单。下拉菜单是一个常见的网站组件，用于提供用户菜单选项。

使用方法

使用W3.CSS创建下拉菜单非常简单。首先需要引入W3.CSS样式表：

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

接下来需要创建一个<div>元素作为下拉菜单的容器。给这个<div>元素添加w3-dropdown-hover或w3-dropdown-click类，将其定义为一个悬停或点击下拉菜单：

<button class="w3-button w3-black w3-hover-teal w3-hover-shadow w3-padding-large w3-round-large w3-dropdown-click">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-border w3-card-4">
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

在这个例子中，我们将<button>元素定义为下拉菜单的触发器，并给它添加了一些W3.CSS类来定义其样式。然后，我们创建了一个<div>元素作为下拉菜单的内容容器，并给它添加了w3-dropdown-content类来定义其样式。在容器内部，我们可以添加任意数量的链接（或其它内容）。

下拉菜单类型

W3.CSS提供了两种不同的下拉菜单类型：悬停和点击。悬停下拉菜单通常在鼠标悬停在菜单触发器上时触发，而点击下拉菜单则在鼠标单击菜单触发器时触发。

要创建悬停下拉菜单，请将菜单触发器的类设置为w3-dropdown-hover。要创建单击下拉菜单，请将菜单触发器的类设置为w3-dropdown-click。

<!-- 悬停下拉菜单 -->
<div class="w3-dropdown-hover">
  <button class="w3-button w3-black">Hover Me</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

<!-- 点击下拉菜单 -->
<div class="w3-dropdown-click">
  <button class="w3-button w3-black">Click Me <i class="fa fa-caret-down"></i></button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>
</div>

自定义样式

W3.CSS下拉菜单提供了许多自定义选项，可以根据自己的需要来调整菜单的样式。以下是一些常用的自定义选项：

• w3-bar-item: 下拉菜单容器内的链接样式
• w3-border: 下拉菜单容器的边框样式
• w3-round: 将下拉菜单容器和链接的边缘圆形化

<!-- 自定义样式的下拉菜单 -->
<div class="w3-dropdown-hover w3-round">
  <button class="w3-button w3-black">Hover Me</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button w3-hover-white w3-grey">Link 1</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-white w3-grey">Link 2</a>
    <a href="#" class="w3-bar-item w3-button w3-hover-white w3-grey">Link 3</a>
  </div>
</div>

在这个例子中，我们使用了w3-hover-white类来指定链接悬停时的背景颜色，并使用w3-grey类来指定未悬停状态下的背景颜色。我们还使用了w3-round类来将容器和链接的边缘圆形化。

总结

W3.CSS下拉菜单是一种简单易用的CSS组件，方便程序员创建漂亮的下拉菜单。使用W3.CSS，你可以创建悬停或点击下拉菜单，并可以轻松自定义菜单的样式。