Wednesday, February 29, 2012

Create basic CSS menu with sub item

To create menu item we generally use ul-li tags

<div id="css_menu">
<ul>
<li class="mainmenu"><a href="#">Link 1</a>
<ul>
<li class="submenu"><a href="#">Link 1-1</a> </li>
</ul>
</li>
</ul>
</div>

css_menu class is the one that is used mainly to create sub menu.
But mainmenu and submenu classes are just to apply styles for the menu items.

#css_menu li
{
list-style: none;
position: relative;
}
#css_menu ul ul
{
position: absolute;
top:0;
left:5px;
visibility:hidden;
}
#css_menu ul li:hover ul
{
visibility:visible;
}
.mainmenu
{
background-color:#EDC8FF;
width:60px;
padding:5px;
}
.submenu
{
background-color:#EDC8FF;
width:60px;
padding:5px;
left:30px;
}
a
{
font:italic bold 12px Georgia, serif;
color:Green;
}