Pure.CSS下拉列表下拉列表|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="http://www.srcmini.com/#" class="pure-menu-link"> Home< /a> < /li> < li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> About Us< /a> < ul class="pure-menu-children"> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Privacy Policy< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Contact Us< /a> < /li> < li class="pure-menu-item"> < a href="http://www.srcmini.com/#" class="pure-menu-link"> Career< /a> < /li> < /ul> < /li> < /ul> < /div> < /html>

立即测试
【Pure.CSS下拉列表】输出