html - purecss 下拉菜单不起作用

Question

我正在尝试使用 purecss 库创建垂直下拉菜单但没有成功

purecss.io/menus/

我的 CSS 代码如下:

<div class="pure-menu custom-restricted-width">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-has-children">
            <a href="#" id="menuLink1" class="pure-menu-link">T-Shirts</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item">
                    <a class="pure-menu-link" href="t-shirts-rundhals-tx-2-1,-1-2-.html">Rundhals</a>
                </li>
                <li class="pure-menu-item">
                    <a class="pure-menu-link" href="t-shirts-v-neck-tx-3-1,-1-3-.html">V-Neck</a>
                </li>
                <li class="pure-menu-item">
                    <a class="pure-menu-link" href="t-shirts-longsleeve-tx-4-1,-1-4-.html">Longsleeve</a>
                </li>
                <li class="pure-menu-item">
                    <a class="pure-menu-link" href="t-shirts-tanktop-tx-124-1,-1-124-.html">Tanktop</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

即使我从他们的文档中复制粘贴示例代码，它也无法正常工作

jsBin

Answer 1

只需为 custom-restricted-width 添加 css 即可正常工作，因为您的 pure-menu div 内容占屏幕的 100% 宽度，因此您无法显示下拉菜单。

.custom-restricted-width{
    display:inline-block;
}