3层li ul菜单答案

【问题标题】：3 layer li ul menu3层li ul菜单
【发布时间】：2013-04-11 11:33:46
【问题描述】：

我想创建一个 3 层的 li ul 菜单，但 3 层覆盖了第二层。有人可以帮我将 3 层与第二层对齐吗？

非常感谢你们的cmets！

最好， W

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>

<HEAD><title>bla</title>

<style type="text/css">
ul {
font-family : Arial, Verdana;
font-size : 18px;
font-weight: bold;
margin : 0;
padding : 0;
list-style : none;
z-index: -10;
}
ul li {
display : block;
position : relative;
float : left;
}
li ul {
display : none;
position : relative;
}
ul li a {
display : block;
text-decoration : none;
color : #ffffff;
border-top : 0 solid #ffffff;
padding : 6px 25px 6px 25px;
background : #033a96;
margin-left : 0;
white-space : nowrap;
}

ul li a:hover {
background : #9092c7;
}
li:hover ul {
display : block;
position : absolute;
z-index: 10;
}
li:hover li {
float : none;
font-size : 14px;
z-index: 10;
}
li:hover a {
background : #9092c7;
z-index: 10;
}
li:hover li a:hover {
background : #033a96;
z-index: 10;
}

</style>
</head>


<body >

            <TABLE  border=0 align="center" cellPadding=0 cellSpacing=0 valign="top">
              <TBODY valign="top">
              <TR valign="top">

             <TD width="100%" bgcolor="#FFFFFF">

                 <TABLE height=19 valign="top" cellSpacing=0 cellPadding=0 width="100%" border=0>
                 <tr>
                 <td height=35 bgcolor="#033a96" > 
                 <div id="menu_about" style="position: relative; z-index: 10;"> 
                 <ul id="menu">
                    <li ><a class="link" href="index.htm" >Layer 1</a>
                    <ul>
                            <li ><a href="#">Layer 2 blblb</a></li>
                            <li ><a href="#">Layer 2</a></li>
                            <ul >
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                            </ul>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                        </ul>

                    </li>


                    <li><a class="link" href="#about" data-link="second">Layer 1</a>
                        <ul>
                            <li ><a href="#">Layer 2 blblb</a></li>
                            <li ><a href="#">Layer 2</a></li>
                            <ul >
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                            </ul>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                            <li><a href="#">Layer 2</a></li>
                        </ul>
                    </li>

                </div>
                </td> 
                </tr>
                </TABLE>                  

            </TD>
            </TR>
            </TBODY>
            </TABLE>

</BODY>
</HTML>

【问题讨论】：

标签： drop-down-menu html-lists layer

【解决方案1】：

我非常怀疑您正在使用所见即所得（如 Dreamweaver）来生成代码？对此有两点说明：

尽量避免内联样式
不要使用基于表格的布局，表格数据除外。使用 div、nav、footer、header 和 side 元素

对于您的解决方案：

删除了所有 z 索引，它们不再需要
您忘记将第三级 ul 嵌套在第二级 li 中
尝试在正常状态元素上设置字体大小等属性，而不是悬停（不会更改）
我建议命名你的 ul 和 li，或者至少在你的 css 中按逻辑顺序排列它们，因为这很混乱。

修复导航的最重要部分是我添加的这个 css

ul li ul li ul {
margin-left: 100%;
}

它将嵌套的 ul 及其子元素的边距设置为父 div 的宽度。

所以这是你的全新 css：

ul {
font-family : Arial, Verdana;
font-size : 18px;
font-weight: bold;
margin : 0;
padding : 0;
list-style : none;
}
ul li {
display : block;
float : left;
}
ul li ul li ul {
margin-left: 100%;
}
li ul {
display : none;
}
ul li a {
display : block;
text-decoration : none;
color : #ffffff;
padding : 6px 25px 6px 25px;
background : #033a96;
white-space : nowrap;
}

ul li a:hover {
background : #9092c7;
}
li:hover ul {
display : block;
position : absolute;
}
li li {
float : none;
font-size : 14px;
}
li:hover a {
background : #9092c7;
}
li:hover li a:hover {
background : #033a96;
}

还有你的 html（仅相关部分）：

<div id="menu_about" style="position: relative; z-index: 10;">
<ul id="menu">
    <li ><a class="link" href="index.htm" >Layer 1</a>
        <ul>
            <li><a href="#">Layer 2 blblb</a></li>
            <li><a href="#">Layer 2</a></li>
            <li><a href="#">Layer 2</a>
                <ul >
                    <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                    <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                </ul>
            </li>
            <li><a href="#">Layer 2</a></li>
            <li><a href="#">Layer 2</a></li>
        </ul>
    </li>
    <li><a class="link" href="#about" data-link="second">Layer 1</a>
        <ul>
        <li ><a href="#">Layer 2 blblb</a></li>
        <li ><a href="#">Layer 2</a>
            <ul >
                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
                <li ><a href="#">Layer 3 Layer 3 Layer 3 Layer 3 </a></li>
            </ul>
        </li>
        <li><a href="#">Layer 2</a></li>
        <li><a href="#">Layer 2</a></li>
        <li><a href="#">Layer 2</a></li>
        </ul>
    </li>
</ul>
</div>

【讨论】：