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