开发者

CSS sidebar multi-level menu

Can you guys point me in the right direction?? I want to add sidebar multilevel functionality to this template. So开发者_Python百科 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.


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).


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.


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜