CSS 下拉菜单 - 第三级问题

Question

我有一个 3 级下拉菜单，并且 3 级子菜单显示在 2 级菜单项旁边，就像它应该的那样，除了一个间隙。 第 2 层设置为 100px 的宽度，所以我将第 3 层绝对定位到 top:0, left:100px，因此它显示在第 2 层的右侧，但有一个间隙。如果我将 left:100px 更改为 left:97px 则没有间隙。这是为什么呢？

HTML：

<nav>
<ul>
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a>
        <ul>
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a>
        <ul>
            <li><a href="#">Sub-Menu 1</a></li>
            <li><a href="#">Sub-Menu 2</a></li>
            <li><a href="#">Sub-Menu 3</a>
                <ul>
                    <li><a href="#">Sub-Menu 4</a></li>
                    <li><a href="#">Sub-Menu 5</a></li>
                    <li><a href="#">Sub-Menu 6</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Menu 5</a></li>
</ul>
</nav>

CSS：

/* Initialise for 3 tiers */
nav ul, ul li ul, ul li ul li ul {
    margin:0;
    padding:0;
}

nav ul li, ul li ul li, ul li ul li ul li {
    list-style-type:none;
    float:left; 
}

/* Link Appearance for 3 tiers */
nav ul li a, ul li ul li a, ul li ul li ul li a {
    text-decoration:none;
    color:#fff;
    background:#666;
    padding:5px 10px;
    float:left; 
}

nav ul li a:hover, ul li ul li a:hover, ul li ul li ul li a:hover {
    background:#C00;
}

/* 2nd Tier */
nav ul li {
    position:relative;  
}

nav ul li > ul {
    display:none;
    position:absolute;
    top:30px;
    left:0;
    width:100px;    
}

nav ul li:hover > ul{
    display:block;  
}

/* 3rd Tier */ 
nav ul li ul li {
    position:relative;  
}

nav ul li ul li:hover > ul {
    display:block;  
}

nav ul li ul li ul {
    display:none;
    position:absolute;
    top:0;
    left:100px;
}

JSFiddle

Answer 1

在这个问题上使用百分比而不是像素： 试试left:100% 看看结果

nav ul li ul li ul {
    display:none;
    position:absolute;
    top:0;
    left:100%;
}

Fiddle

你也不需要写ul li ul li ul li a之类的。你可以写：

ul ul ul a{
your CSS code
}

Answer 2

问题在于菜单之间的差距。它们需要相邻甚至重叠才能使此悬停技巧起作用。

所以不要指定

left: 100px;

做类似的事情

left: 100%; 
/* or even */
left: 99%; 

这将导致第 3 层与第二层菜单相邻，甚至与第二层稍微重叠（99%），让您移动鼠标时不会出现任何关闭菜单的中断。而且您也不必担心菜单的宽度。

更新小提琴：http://jsfiddle.net/tqEfW/5/

如果你想保持外观的差距，你可以给第 3 层 ul 一个填充：

nav ul li ul li ul {
    ....
    left: 100%;
    padding-left: 4px;
}

此处展示的广告：http://jsfiddle.net/tqEfW/9/

也就是说，从用户体验的角度来看，具有 3 层的菜单很难使用，应尽可能避免使用。

Answer 3

如果您创建像 ul.first-level > li 或 ul.second-level > li 这样的 CSS 选择器，它只会选择紧接在 ul 之后的 li，类为 first-level（或分别为类 second-level）。

通过这种方式，无需交互很多可能非常难以阅读的ul li ul li ul，您就可以控制任何复杂嵌套列表的外观。

Answer 4

看起来你知道如何解决它，但你的问题是为什么会这样。

现在在您的代码中，您将宽度 100px 设置为 ul。但 li 没有宽度。现在两个宽度都不一样了。 ul 中的宽度是该列表区域的宽度。 li 中的宽度表示每个单独列表项的宽度。在你的情况下，你的

  ul li a
  {
   padding: 5px 10px;
  }

现在 a 的填充不会填满整个区域。并且您将背景颜色设置为 ul li a，因此其覆盖的大部分区域（不确定 'cover' 是否适合提及它）它的背面显示为暗，并且大约还剩 3 像素，所以它显示为白色。

如果你放

  ul li a
  {
   padding: 5px 10.1px;
  }

您会看到li在菜单级别之间没有间隙[#123]。

而不是将背景设置为 ul li a 如果你将它设置为 ul 你可以看到那里没有差距[#123]

#123 实际的白色区域不是间隙。 ul 为 100 像素，但文本包括左右 10 像素的内边距不填充总 100 像素。它仅填充 97px，因此当您将宽度设置为 97px 时，它不会显示白色区域。但是当它是 100px 时，这会将 97px 的背景显示为黑色，其余 3px 的背景显示为白色，看起来像一个间隙。