Css – multilevel vertical unorder list menu

css

alt text http://www.pwiser.com/error.pnghi i want to make unorder list based menu unable to figure it out i attached the image for better understanding please help below is my css and xhtml

#verticalSubmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
text-transform:uppercase;
}

#verticalSubmenu li { margin: 0 0 3px 0; background:#dedede; border: 1px solid #f7f7f7; color:#666666;  height:auto;
 }
#verticalSubmenu li.parent { background:#6c6b6b; color:#fcfafa; height:auto;
}

#verticalSubmenu a
{
    display: block;
    padding: 4px 2px 2px 10px;
    width: 138px;

}

#verticalSubmenu li a:link, #navlist a:visited{
color: #666666;
text-decoration: none;
}

#verticalSubmenu li.parent a:link, #navlist a:visited
{
color: #fcfafa;
}
#verticalSubmenu ul ul {
    position:relative;
    height:0;
    top:10px;
    left:0; 
    }
#verticalSubmenu ul ul li{
    background:#f9f9f9;
    border:1px solid #f9f9f9;
    }
#verticalSubmenu ul ul a{
    padding: 4px 2px 2px 20px;
    height:auto;
    }


<div id="verticalSubmenu">
                <ul id="navlist">
                    <li class="parent"><a href="#">Item one</a></li>
                    <li><a href="#">Item two</a></li>
                    <li><a href="#">Item three</a></li>
                    <li><a href="#">Item four</a></li>
                    <li>
                        <a href="#">Item five</a>
                        <ul>
                            <li> <a href="#">Item six</a></li>
                            <li> <a href="#">Item six</a></li>
                            <li> <a href="#">Item six</a></li>
                            <li> <a href="#">Item six</a></li>
                        </ul>
                    </li>
                <li><a href="#">Item four</a></li>
                </ul>
            </div>

Best Answer

It looks like the above example may be a 3 levels menu - which isn't much harder than the 2 level menu you already have once you get it working.

My suggestion is build the whole thing so you have one massive expanded menu, rather than only putting in the li's and ul's appropriate to whatever section they are currently in, then do something like this:

ul ul {
display: none;
}

ul li.lit ul {
display: block;
}

Then give whatever menu item they happen to be in (on the li) the class of .lit and it will only show that menu as open. It's much easier than generating a custom menu for each and every page.

Related Topic