multilevel vertical unorder list menu

Answer 1

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 2

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 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 :)