I am using Pure CSS modules that use YUI CSS. I am trying to create a simple vertical menu with a submenu but the indentation is not working. I do not want anything fancy; I do not want a dropdown or pop-up menu or anything like that. I want a menu such as the following:
The folowing is what I have:
<div class="pure-g-r"><div class="pure-u-1-5"><div class="pure-menu pure-menu-open"><p class="pure-menu-heading"><a href="#">Home</a></p><ul><li class="pure-menu pure-menu-open"><a href="#">Messages</a><ul><li><a href="#">Pending</a><li><a href="#">Spam</a><li><a href="#">Post</a><li><a href="#">Attachments</a></ul></li><li><a href="#">Files</a></li><li><a href="#">Photos</a></li><li><a href="#">Links</a></li><li><a href="#">Databases</a></li><li><a href="#">Polls</a></li><li><a href="#">Members</a><ul><li><a href="#">Pending</a></li></ul></li><li><a href="#">Calendar</a></li><li class="pure-menu-separator"></li><li><a href="#">Promote</a></li><li><a href="#">Invite</a></li><li class="pure-menu-separator"></li><li><a href="#">Management</a></li></ul></div></div><div class="pure-u-4-5"><p class="l-box">Other stuff goes here.</p></div></div>
That works except I do not get the indentation for the submenu under Messages or the Pending under Members.