Yahoo PureCss Вертикальная навигация

Question

Привет, я новичок в PureCss из Yahoo. Я пытаюсь сделать вертикальную навигацию со складными элементами, я удивляюсь, почему ul в l i не показывает никакого отображения. Нет другой CSS. Только PureCss из Yahoo.

это мой код:

 <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

Как я понял из документации, вам нужно добавить 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/