Yahoo PureCss Vertical Nav

Question

Hi Im new to PureCss of Yahoo. Im trying to make a vertical navigation with collapsible items im wondering why ul in a li doesn't shows any display. No other css. PureCss of Yahoo only.

this is my code:

 <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

As i Understood by the documentation you need add pure-menu-open to any menu that you want to show, and some other classes to make it look decent, this is anyways what i came up with.

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

You can see a live version here http://jsfiddle.net/p4hus/