CSS sidebar multi-level menu

Question

Can you guys point me in the right direction?? I want to add sidebar multilevel functionality to this template. So when I hover over one of the items in the main menu some subitems slide to the right... preferably using only css and mantaining the style/color/look, etc... I suck at css, please help.

Answer 1

You will need to do something like this:

<div class="menu">
      <ul>
          <li class="list_item">
              <a href="#">Home</a>
              <ul class="submenu">
                   <li class="sub_list_item"><a href="#">Home</a></li>
                   <li class="sub_list_item"><a href="#">Home</a></li>                    
                   <li class="sub_list_item"><a href="#">Home</a></li>
              </ul>
          </li>
      </ul>
  </div>

This will be a basic structure for one menu item that has 3 sub list items. I didn't test this code, but here's some css styling to start off with.

ul.submenu {
  display:none;
 }
 ul.submenu:hover{
 display:block;
 }
 ul.submenu li.sub_list_item {
 width:100px;
 background:blue;
 color:#fff;
 line-height:30px;
 height:30px
 }

That should be enough to start you off with. Good luck.

Answer 2

This is a good place to start. Lots of different options there

Answer 3

Eric Meyer's pure CSS menu example might be useful. (If you go to the linked page, hover over the "css/edge" to see the menus pop up).