1

嗨，我是 Yahoo 的 PureCss 新手。我试图用可折叠的项目进行垂直导航，我想知道为什么 li 中的 ul 不显示任何显示。没有其他的CSS。仅限 Yahoo 的 PureCss。

这是我的代码：

 <div class="pure-u" id="nav">
    <a href="#" class="nav-menu-button">Menu</a>

    <div class="nav-inner">
        <div class="pure-menu pure-menu-open">
            <ul>
                <li><a href="#">Dashboard</a></li>
                <li>
                    <a href="#">Sales</a>

                        <ul> <!-- this doesn't show :( -->
                            <li>Create Order</li>
                            <li>Orders</li>
                            <li>Sales Report</li>
                        </ul>

                </li>
                <li><a href="#">Purchasing</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Users</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Settings</a></li>

            </ul>
        </div>
    </div>
</div>
4

1 回答 1

1

正如我从文档中了解到的那样，您需要将 pure-menu-open 添加到您要显示的任何菜单以及其他一些类以使其看起来不错，无论如何，这就是我想出的。

<div class="pure-u" id="nav">
    <a href="#" class="nav-menu-button">Menu</a>

    <div class="nav-inner">
        <div class="pure-menu pure-menu-open">
            <ul>
                <li><a href="#">Dashboard</a></li>
                <li class="pure-menu pure-menu-open pure-menu-can-have-children pure-menu-has-children">
                    <a href="#">Sales</a>

                        <ul> <!-- this doesn't show :( -->
                            <li>Create Order</li>
                            <li>Orders</li>
                            <li>Sales Report</li>
                        </ul>

                </li>
                <li><a href="#">Purchasing</a></li>
                <li><a href="#">Reports</a></li>
                <li><a href="#">Users</a></li>
                <li><a href="#">Help</a></li>
                <li><a href="#">Settings</a></li>

            </ul>
        </div>
    </div>
</div>

您可以在此处查看实时版本http://jsfiddle.net/p4hus/

于 2013-09-14T03:16:03.613 回答