顶部下拉导航菜单在右侧而不是左侧显示最后一个菜单项的子项？答案

【问题标题】：Top drop down navigation menu displaying the child of the last menu item on right side instead on left side?顶部下拉导航菜单在右侧而不是左侧显示最后一个菜单项的子项？
【发布时间】：2012-03-28 18:07:35
【问题描述】：

我有一个顶部下拉导航菜单，其中每个菜单项都有子项，这些子项显示在右侧。

除了最后一个之外的所有菜单项都可以。因为当我将鼠标悬停在最后一个菜单项上时，会出现下拉菜单，然后当我将鼠标悬停在带有子项的菜单项上时，子项显示在右侧并隐藏，因为浏览器窗口在那里结束。

那么当浏览器窗口结束时，我应该怎么做才能在左侧显示子菜单项，以便菜单项出现在用户面前。

有什么帮助吗？

编辑 http://harleydragon.info 请看这个网站。将鼠标悬停在 Pigeon Forge 菜单上并查看其子项。孩子应该出现在左侧，因为右侧没有空间。

【问题讨论】：

标签： css drop-down-menu

【解决方案1】：

这个问题真的不清楚，但我想我明白发生了什么......

要么给你的最后一个菜单项一个 id（例如#last-item），然后将后续子项设置为出现在左边（给定#last-item id），而不是右边（使用你喜欢的方法，具体取决于你的情况 - 即位置：相对 + 左边距或浮动边距）

#menu .children
{
    /* position right */
}

/* "#menu" in the following style is NOT required, 
   I left it in for sake of clarity. */
#menu #last-item .children  
{
    /* position left */
}

还可以考虑使用 CSS 伪类来设置最后一个元素的子元素的样式：

http://www.quirksmode.org/css/firstchild.html

【讨论】：

（只是提示：）我认为#last-item .children 中的'.children' 有点多余，因为ID 已经是每页唯一的。或者使用CSS3属性:last-child（IE9以下不可用）
虽然问题含糊不清，因此可以解释 (IMO)，但上面的 #last-item 元素指的是菜单中的最后一个父项，它产生了下面的子元素需要样式 - 在这种情况下 #last-item 是必需的，但我将编辑我的答案以进一步澄清这一点:) 此外，我在上面提供的链接实际上引用了 :last-child
是的，我误解了。我的坏:)
harleydragon.info 请看这个网站。将鼠标悬停在 Pigeon Forge 菜单上并查看其子项。孩子应该出现在左侧，因为右侧没有空间。
是的，我上面建议的方法将为您解决这个问题。如果您将.dropdown ul 标记中的最后一个<li> 指定为#last-item，则使用样式#last-item ul li 适当地设置子项的样式，使其出现在左侧而不是右侧。您也可以使用.dropdown:last-child 实现此目的（但请注意浏览器兼容性）