Question

我是雅虎PureCss的新手。我试图用可折叠的项目进行垂直导航我想知道为什么ul中的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>

Answer 1

正如我在文档中所理解的那样，您需要为要显示的任何菜单添加纯菜单打开，以及其他一些使其看起来不错的类，这无论如何都是我想出来的。

<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/

Yahoo PureCss Vertical Nav

1 个答案: