css - 菜单无法正确对齐

Question

我有一个 CSS 菜单，我需要孩子与父菜单对齐。我似乎无法做到这一点。我已经尝试了几件事，但菜单不会以 div 为中心。

它应该是什么样子：

这是代码：http: //jsfiddle.net/V95wJ/

Answer 1

你正在使用

text-align:center;

对于您的父菜单，子菜单无法使用 CSS 与父菜单对齐。也许用js，但即使用它，我也不认为这是可能的。

我认为您必须为每个儿童菜单手动执行此操作。

Answer 2

您ul.nice-menu li ul li a在 CSS 中的样式可以在左侧添加一些填充/边距。快速测试表明，将此元素的填充设置为：

padding: 0;
padding-left: 20px;

...并添加

  margin-top: -10px;

使ul.nice-menu li ul菜单和子菜单的顶部和底部接触整齐。

应该大致给出你想要的。

请注意，我在 Chrome 中进行了测试。

---

编辑：正如 Jerska 所指出的，您的顶部菜单项居中，这意味着对齐子菜单中的文本将不起作用（至少不容易，并且没有太多调整，然后可能无法正常工作所有浏览器）。

我将留下我的答案，因为它可能有助于为您指出正确的方向，例如左对齐的菜单项。