当前位置：srcmini > Pure.CSS > 正文

Pure.CSS下拉列表

2020-03-25 03:31:23 分类：Pure.CSS 阅读(852) 评论(0)

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

立即测试

输出

PureCSS下拉列表1

赞(0)

未经允许不得转载：srcmini » Pure.CSS下拉列表

标签：下拉列表

相关推荐

评论抢沙发

评论前必须登录！

立即登录注册

回顶
回顶部