html - 菜单项在悬停时移动且无法居中

Question

我正在为这个站点设计主水平导航:http://www.myfortune3cart.com/journeyfilm/

我试图解决两个问题，但在 CSS 中找不到任何地方。

1. 我无法在菜单容器中将菜单项居中。我试过使用 text-align:center;和 margin :0 自动；在各种 div 中都无济于事。

2. 将鼠标悬停在他们移动的元素上时。购买链接(下拉菜单的移动方式与其他链接不同)。我已尝试设置填充并寻找过渡，但无法解决问题。

我会把代码放在这里，但我什至不确定 CSS 的哪一部分会影响这两项。我确信我忽略了一些愚蠢的事情，但我厌倦了为此拉扯我的头发。

如有任何帮助，我们将不胜感激。我试图让它看起来像这样:http://www.studiobenna.com/jf/

谢谢，

马特

Answer 1

试试这个解决你的第一个问题

.wrapper_menu {
    display: block;
    margin: 0 auto;
    width: 586px;
    z-index: 9999;
}

你需要给 .wrapper_menu 一些宽度

对于第二个问题，从

中删除多余的填充

.menu li.nodrop:hover {
    border-radius: 5px;
    padding: 0.25em 1.563em;
}

.menu li:hover {
    border-bottom: medium none;
    border-radius: 5px 5px 0 0;
    margin-right: 0;
    padding: 0.25em 1.563em;
}

从两者中删除填充也为 .wrapper_menu .menu 提供适当的高度