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

Question

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

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

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

有什么帮助吗？

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

Answer 1

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

要么给你的最后一个菜单项一个 id(例如 #last-item)，然后设置后续子项的样式以显示在左侧(给定 #last-item > id)，而不是右边(根据您的情况使用您喜欢的方法 - 即position:relative + 左边或 float 边距)

#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