Multi level vertical list menu

in this post i want to show how i built multilevel vertical menu, first i tried to find solution but i could’t find so i started building my own above is result what i built.

css xhtml for the multilevel vertical menu

and here is css that will convert above xhtml to multilevel vertical menu
#verticalSubmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}

#verticalSubmenu li {
float:left;
margin: 0 0 3px 0;
color:#666666;
height:auto;
display:block;
}

#verticalSubmenu li a
{
display: block;
padding: 5px 2px 2px 10px;
width: 138px;
height:16px;
border: 1px solid #f7f7f7;
background:#6c6b6b;
color:#fcfafa;
text-decoration:none;
}
#verticalSubmenu ul ul{
margin-top:2px;
position:relative;
}
#verticalSubmenu ul ul li a{
display: block;
padding: 4px 2px 2px 10px;
width: 138px;
color:#6e6e6e;
background:#dedede;
}
#verticalSubmenu ul ul ul{
margin-top:10px;
position:relative;
}
#verticalSubmenu ul ul ul li a{
display: block;
padding: 4px 2px 2px 20px;
width: 128px;
background:#f9f9f9;
color:#6e6e6e;
}

Leave a Reply