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: Home Messages Pending Spam Post Attachments Files Photos Links Databases Polls Members Pending Calendar Promote Invite Management Other stuff goes here. That works except I do not get the indentation for the submenu under Messages or the Pending under Members.

Answer

Vertical menu and submenus uisng Pure CSS and YUI

Sam Hobbs

10y

1.6k

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>