【问题标题】:Centering a dropdown menu below parent menu with CSS使用 CSS 在父菜单下方居中下拉菜单
【发布时间】:2011-12-17 06:58:46
【问题描述】:

我遇到了一个下拉菜单的问题,该菜单在其父菜单的左侧显示过多。

我对定位有点困惑,因为导航菜单的 CSS 大部分不是由我自己完成的。我真的很感谢一些帮助。

谢谢!

【问题讨论】:

  • 您是否可以创建一个仅包含菜单栏的测试页面?使用起来会容易得多。
  • @Charlie,如果有帮助,我只是设置了这个:dev.gratefulhearttherapy.org/test
  • 你能只包括菜单栏吗?没有其他页面元素?

标签: css drop-down-menu


【解决方案1】:

如果您在顶部菜单容器上设置 position: relative 并在子容器上删除 left: 142px,您将左对齐。

.custom ul.mega-menu li {
    position: relative
}
.custom ul.mega-menu li .sub-container {
    left: 0
}

【讨论】:

  • 我在我的 CSS 文件末尾复制了您的行,但它没有按预期工作。 “服务”下拉菜单显示在“治疗师”下方,“关于我们”下拉菜单显示在导航栏右侧。您可以使用 Chrome Inspector 进行尝试。不确定它是来自您的代码还是我没有正确实现。
  • 这是因为您的 HTML 中有一些规则会覆盖 CSS 规则。您应该从 HTML 代码中删除 'left: 142px' 规则。
  • 它有效,谢谢!不过,我必须在我的 CSS 文件中使用 !important 来覆盖 HTML 规则。该规则似乎是由我使用的“Mega Menu”插件动态生成的(对你来说 142px 值对我来说是 126px 值),所以我不知道如何从源头禁用它。跨度>
猜你喜欢
  • 2014-03-08
  • 2011-09-26
  • 1970-01-01
  • 2013-07-12
  • 1970-01-01
  • 1970-01-01
  • 2014-02-23
  • 2021-04-22
  • 2013-11-14
相关资源
最近更新 更多