How To Create Pure CSS Vertical Menu

Share this post!

Vote this!

In this article,  we are going to build the second most common menu navigation, the vertical navigation menu. Here we are going to be using only pure CSS and un-ordered lists to create our menu with three sub-levels.

To start lets create our menus container block and give it an id of “navigation”:
<div id="navigation">
</div>

Next we will add our first level menu items:
<div id="navigation">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

After that, we are going to give our list items some names:

More...