CSS 下拉子菜单垂直对齐答案

【问题标题】：CSS drop down sub-menus vertical alignmentCSS 下拉子菜单垂直对齐
【发布时间】：2015-06-02 19:24:52
【问题描述】：

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

我尝试搜索此问题，但实际上很少有关于此问题的点击。我认为包含元素 (LI) 是“位置：相对”，子菜单 (UL) 是“位置：绝对”，但它总是将其相对于父 UL。

感谢任何提示。

【问题讨论】：

为了清楚起见，在示例中，您声明在“计费”下您可以找到“报告” - 这应该是一个子菜单，但它不是 - 在“报告”下，您应该找到“销售”报告”。我理解你吗？
没错。 “主”菜单是顶部的菜单，其中包括“计费”。将鼠标悬停在它上面会出现一个子菜单，其中包括“报告”作为最后一项。将鼠标悬停在上面会出现一个子菜单，其中包含一项“销售报告”。问题是最后一个在顶部，它应该在“报告”旁边，以便您可以将鼠标悬停在它上面并选择它。
在您的 Vybe.css 文件的第 286 行，在您的 nav ul ul ul 上，您有一个“top”属性，当前设置为 30px，尝试将其更改为 252px 并告诉我什么你认为

标签： css html

【解决方案1】：

在你的 Vybe.css 文件的第 286 行，你有一个像这样的元素：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 是正确的。

让我知道这对您是否有效。

【讨论】：

我不得不说，“不”。它可能会将一个菜单放在我想要的位置，但我真的想要一个通用的解决方案。我不想对自己的页面进行微观管理。
我明白了，我在晚上通勤回家后的 2 分钟内写下了我的解决方案。明天我会给你一个更完整的解决方案，除非其他人可以帮助你......抱歉耽搁了。如果您发现任何有用的信息，请务必支持/接受答案:)

【解决方案2】：

在您的 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:30px 替换为top:0

【讨论】：

是的！完美的。现在我只需要弄清楚它为什么起作用。我必须承认浮动标签有时会让我感到困惑。我了解左侧和顶部的调整。一旦添加了 float:left，它们就很明显了，但为什么会这样呢？我什至尝试过 float:right 并且效果也很好。
float 标签可用于创建整个网页布局。浮动元素仍然是网页流的一部分。在您的情况下，当您使用 float:none 时，LI 元素无法在布局中获得它们的空间，因此子子 UL 相对于主 UL 而不是 LI 定位自己元素。