Pure.CSS 下拉菜单

2025 年 3 月 17 日 | 阅读 1 分钟

您可以通过对标记进行小改动来创建下拉导航。您需要向相应的菜单项添加类名 "pure-menu-has-children" 以创建下拉菜单。要在悬停时显示子菜单，请包含类名 "pure-menu-allow-hover"。

示例

让我们以一个例子来演示如何创建下拉菜单

<!DOCTYPE html>
<html>
<link rel="stylesheet" 
href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
crossorigin="anonymous">

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="#" class="pure-menu-link">About Us</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Privacy Policy</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Contact Us</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Career</a>
          </li>
        </ul>
    </li>
  </ul>
</div>
</html>

立即测试

输出