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
精彩评论