multilevel vertical unorder list menu

Question

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>                

Answer 1

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.

Answer 2

I think your...

#verticalSubmenu ul ul {
    position:relative;
    height:0;
    top:10px;
    left:0; 
}

Is the likely culprit. position: relative; will remove it from the page, thus positioning the LI below underneath it. Replace that whole rule with this:

#verticalSubmenu ul ul {
    display: block;
}

Answer 3

above question resolved solution posting if any one need menu like this

<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="#">Third Level</a></li>
                            <li> <a href="#">Third Level</a></li>
                        </ul>
                    </li>
                <li><a href="#">Item six</a></li>
                <li><a href="#">Item seven</a></li>
                <li><a href="#">Item eight</a></li>
                 <li class="parent"><a href="#">Item one</a></li>
                  <li class="parent"><a href="#">Item one</a></li>
                   <li class="parent"><a href="#">Item one</a></li>
                </ul>
            </div>

#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:#dedede;
    color:#6e6e6e;
    text-decoration:none;
    }
#verticalSubmenu li.parent a
{
    background:#6c6b6b;
    color:#fcfafa;
    }
#verticalSubmenu ul ul{
    margin-top:10px;
    position:relative;
    }
#verticalSubmenu ul ul li a{    
    display: block;
    padding: 4px 2px 2px 20px;
    width: 128px;
    background:#f9f9f9;
}

i will make some improvement but basic structure is complete cheers :)