Pure.CSS下拉列表

你可以通过在标记中进行少量更改来创建下拉导航。你必须将类名” 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" 
integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
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>

立即测试

输出

猜你喜欢