多级垂直排序列表菜单

替代文字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>                

---

它看起来像上面的例子可能是一个3级菜单 - 这不是比你已经拥有的2级菜单更难一旦你得到它的工作。

我的建议是建立整个事情，所以你有一个大规模的扩展菜单，而不是只将李和ul适用于他们目前在任何部分，然后做这样的事情：

ul ul {
display: none;
}

ul li.lit ul {
display: block;
}

然后给他们碰到的任何菜单项目（在li上）.lit类，它只会将菜单显示为open。 这比为每个页面生成自定义菜单要容易得多。

---

我想你...

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

是可能的罪魁祸首。 位置：相对; 将它从页面中删除，从而将LI放置在其下面。 用这个替换整个规则：

#verticalSubmenu ul ul {
    display: block;
}

---

上述问题解决了解决方案发布，如果任何人需要这样的菜单

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

我会做一些改进，但基本的结构是完整的欢呼:)

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

上一篇: multilevel vertical unorder list menu

下一篇: It is recommendable to type the color's name instead of its hex value in CSS?