0

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

我非常感谢您的评论！

最佳，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>
4

1 回答 1

0

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

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

对于您的解决方案：

  1. 删除了所有的 z 索引，它们不是必需的
  2. 您忘记将第三级 ul 嵌套在第二级 li 中
  3. 尝试在正常状态元素上设置字体大小等属性，而不是悬停（不改变）
  4. 我建议命名你的 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>
于 2013-04-28T23:34:20.120 回答