Question

alt text http://www.pwiser.com/error.png嗨我想制作无序列表菜单无法弄清楚我附上图片以便更好地理解请帮助下面是我的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>

Answer 1

我认为你......

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

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

#verticalSubmenu ul ul {
    display: block;
}

Answer 2

看起来上面的例子可能是一个3级菜单 - 这比你工作时已经拥有的2级菜单要难得多。

我的建议是构建整个事情所以你有一个大规模的扩展菜单，而不是仅仅放入li和ul适合他们当前所在的部分，然后做这样的事情：

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

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

多级垂直无序列表菜单

3 个答案: