Question

我有一个3级下拉菜单，第3级子菜单显示在第二级菜单项旁边，除了间隙。第二级设置为100px的宽度，所以我绝对将第3级定位到顶部：0，左：100px因此它显示在第2级的右侧，但是有一个间隙。如果我改变左：100px到左：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/

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

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

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

也就是说，从UX的角度来看，3层菜单很难使用，应该尽可能避免使用。

Answer 3

如果你创建了ul.first-level > li或ul.second-level > li这样的CSS选择器，那么它只会选择ul之后的first-level类second-level（或类{{1}分别）。

通过这种方式，如果没有对很多读取的ul li ul li ul进行交互，您可以控制任何复杂嵌套列表的外观。

Answer 4

看起来你知道如何解决它，但你的问题是为什么会发生这种情况。

现在，在您的代码中，您将宽度100px放到 ul 。但 li 没有nay宽度。现在两个宽度都不一样。 ul 中的宽度是此列表区域的宽度。 li 中的宽度表示每个列表项的宽度。在你的情况下你的

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

现在 a 的填充不会填满整个区域。并且你把背景颜色放在 ul li a 所以覆盖的区域很大（不确定'覆盖'是适当的词提及它）它背面显示黑暗大约3px离开，所以显示白色。

如果你把

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

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

如果将背景设置为 ul 而不是将背景设置为 ul li a ，您可以在那里看到没有差距[＃123]

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

CSS下拉菜单 - 第3级问题

4 个答案: