多级垂直无序列表菜单

Question

alt text http://www.pwiser.com/error.pnghi 我想让基于无序列表的菜单无法弄清楚我附上了图片以便更好地理解请帮助下面是我的 css 和 xhtml

#verticalSubmenu ul { 边距：0； 填充：0； 列表样式类型：无； 字体系列：Arial、Helvetica、sans-serif； 字体大小：11px； 文本转换：大写； } #verticalSubmenu li { 边距：0 0 3px 0;背景：#dedede;边框：1px 实心#f7f7f7；颜色：#666666;高度：自动； } #verticalSubmenu li.parent { 背景：#6c6b6b;颜色：#fcfafa；高度：自动； } #verticalSubmenu a { 显示：块； 填充：4px 2px 2px 10px； 宽度：138px； } #verticalSubmenu li a:link, #navlist a:visited{ 颜色：#666666； 文字装饰：无； } #verticalSubmenu li.parent a:link, #navlist a:visited { 颜色：#fcfafa； } #verticalSubmenu ul ul { 位置：相对； 高度：0； 顶部：10px； 左：0； } #verticalSubmenu ul ul li{ 背景：#f9f9f9; 边框：1px 实心#f9f9f9; } #verticalSubmenu ul ul a{ 填充：4px 2px 2px 20px； 高度：自动； }

<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

我认为你的...

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

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

#verticalSubmenu ul ul {
    display: block;
}

Answer 2

看起来上面的示例可能是一个 3 级菜单 - 一旦你开始工作，这并不比你已经拥有的 2 级菜单难多少。

我的建议是构建整个东西，这样你就有一个庞大的扩展菜单，而不是只将 li's 和 ul's 放入适合它们当前所在的任何部分，然后执行以下操作：

ul ul {
display: none;
}

ul li.lit ul {
display: block;
}

然后将它们碰巧位于（在 li 上）的任何菜单项赋予 .lit 类，它只会将该菜单显示为打开状态。这比为每个页面生成自定义菜单要容易得多。

Answer 3

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

<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
{
    边距：0；
    填充：0；
    列表样式类型：无；
    字体系列：Arial、Helvetica、sans-serif；
    字体大小：11px；
    文本转换：大写；
}

#verticalSubmenu li {
    向左飘浮;
    边距：0 0 3px 0；
    颜色：#666666;
    高度：自动；
    显示：块；
 }

#verticalSubmenu li a
{
    显示：块；
    填充：5px 2px 2px 10px；
    宽度：138px；
    高度：16px；
    边框：1px 实心#f7f7f7；
    背景：#dedede;
    颜色：#6e6e6e；
    文字装饰：无；
    }
#verticalSubmenu li.parent a
{
    背景：#6c6b6b;
    颜色：#fcfafa；
    }
#verticalSubmenu ul ul{
    边距顶部：10px；
    位置：相对；
    }
#verticalSubmenu ul ul li a{
    显示：块；
    填充：4px 2px 2px 20px；
    宽度：128px；
    背景：#f9f9f9;
}

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