multilevel vertical unorder list menu

替代文字http://www.pwiser.com/error.pnghi我想使基于unorder列表的菜单无法弄清楚我附加了图像以便更好地理解，请在下面帮助我的css和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>                

---

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.

---

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;
}

---

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

链接地址: http://www.djcxy.com/p/87558.html

上一篇: 超大型日历软件

下一篇: 多级垂直排序列表菜单