此菜单代码是http://purecss.io/menus/中的第一个示例。
但是效果不好:(
每个<li>
项目彼此保持一屏距离。如果向下滚动,您会看到其他项目。
但它适用于 purecss.io/menus 页面。我不知道为什么。
(在这里,当您运行它时也可以正常工作……您必须使用此代码创建一个 html 文档,然后它会失败……)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="pure-menu">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a>
</li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a>
</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a>
</li>
</ul>
</div>
</body>
</html>
我看到pure-menu-item
有一个height: 100%
,我认为这有点奇怪。这是问题吗?