具有子UL LI的CSS菜单

Question

当我将鼠标悬停时，如何修复我正在移动的菜单？ 如何修复或覆盖子菜单？

nav a:hover {
    border-left: 0;
    border-right: 0;
    border-top: 7px solid #04B404;
    text-decoration:none;
}

我以为text-decoration:none; 正在修复效果。 我在jsfiddle上传了我的整个菜单。

http://jsfiddle.net/vicR/ScM8Y/

Answer 1

更改以下样式以适应顶部和浮动div上的7px边框。

nav a:hover {
    border-left: 0;
    border-right: 0;
    border-top: 7px solid #04B404;
    text-decoration:none;
    margin-top:-7px; /* move 7px up */
}

nav ul li:hover > ul {
    display: block;
    border-top: 0px solid #04B404;
    text-decoration:none;
    position:absolute; /* don't shift others */
}

Answer 2

您可以切换到使用“box-shadow”属性，而不是使用border-top：

这是一个例子：

显然这不是最佳实践，但如果您不想开始添加一堆相应的margin-tops，您可以获得相同的效果：

.border-top li:hover{ border-top: 10px solid red;}
.shadow-top li:hover{ box-shadow: 0 -10px 0 0 red;}

Answer 3

请参阅以下更新的小提琴： http ： //jsfiddle.net/ScM8Y/6/

问题的一部分是隐藏的内容没有宽度（好吧，它至少没有计算），但你的菜单标题呢。 因此，当您将鼠标悬停在它们上方时，现在可见部分的宽度会有一个宽度。 这会向左或向右推动其他菜单以适应更改。 要解决这个问题，你应该给菜单一个预期的最小值，你认为它们必须占用或者给它们一个标准宽度。

在小提琴中，我在CSS中给了他们所有的宽度。

nav ul li {
    width: 200px;
}

上下移动来自您在悬停期间出现在菜单顶部的大边框。