CSS下拉菜单垂直对齐

我有一个下拉菜单，在https://admin.vybenetworks.com/vybe/dropdown/这工作正常，除了一件事。子菜单对齐到导航的顶部，而不是它所属的菜单项。例如，在“结算”下，有一个名为“报告”的子菜单，其中有一个名为“销售报告”的项目。子菜单显示在“定期结算”项目附近，而不是“报告”旁边。CSS下拉菜单垂直对齐

我试图寻找这个问题，但很少有点击是关于这个问题。我认为包含元素（LI）是“位置：相对”，子菜单（UL）是“位置：绝对”，但它始终将其与父UL相对放置。

感谢您的任何提示。

来源

2015-06-02 D' Arcy

更换top:30px仅仅是明确的，在你的国家的例子在'账单'下你可以找到'报告' - 这应该是一个子菜单，但它不是 - 在'报告'下你应该找到'销售报告'。我很了解你吗？ – AGE

这是正确的。 “主”菜单是包含“帐单”的顶部菜单。将鼠标悬停在其上方会出现一个包含“报告”作为最后一项的子菜单。将鼠标悬停在一个子菜单上，显示一个项目“销售报告”。问题是这最后一个出现在顶部，它应该在“报告”旁边，以便您可以将其选中并选择它。 –

在您的Vybe.css文件的第286行中，您的导航栏中有一个'top'属性，该属性当前设置为30px，请将其更改为252px，并让我知道您认为我所说的 – AGE

在你的Vybe.css文件的第286px行，你有一个像这样的元素：nav ul ul ul。将此元素的属性顶部更改为：

nav ul ul ul { 
    /* other code here, don't copy this comment */ 
    top: 252px; 
    /* other code there, don't copy this comment */ 
}

这会使子菜单元素向下滑动到相应的父级旁边。你可以修改你认为合适的，但我认为252px是现货。

让我知道，如果这工作/不适合你。

来源

2015-06-02 20:08:26 AGE

，“不”。它可能会把那个菜单放在我想要的地方，但我真的想要一个通用的解决方案。我不想微观管理我自己的网页。 –

我明白了，我在离开后2分钟内为我的晚上通勤回家写了我的解决方案。我明天会给你一个更完整的解决方案，除非别人可以帮助你......对于延误抱歉。请确保upvote /接受答案，如果你发现任何有用的:) – AGE

在你的CSS文件Vybe.css，更新后的事情，

NAV UL UL LI { 
    border: none; 
    float: left; 
    position: relative; 
    width: 100%; 
} 
NAV UL UL UL { 
    left: 105%; 
    top: 0; 
    border-style: none; 
    width: 195px; 
    position: absolute; 
}

float:none与float:left更换，left:100%替换105%与top:0

来源

2015-06-02 20:16:39 dsaket

是的！完善。现在我只需要弄清楚它为什么起作用。我必须承认，浮标有时会让我困惑。我了解左侧和顶部的调整。他们很明显，一旦浮动：左侧被添加，但为什么这个工作？我甚至尝试过float：正确的，它也起作用。 –

'float'标签可用于创建整个网页布局。浮动元素仍然是网页流的一部分。在你的情况下，当你使用'float：none'时，'LI'元素不会在布局中获得它们的空间，结果子子'UL'相对于主'UL'而不是' LI'元素。 – dsaket

CSS下拉菜单垂直对齐

回答

相关问题