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

您可以切换到使用＆＃34; box-shadow＆＃34;而不是使用border-top;属性：

Here's an example:

显然，这不是一种最佳做法，但如果您不想开始添加一堆相应的保证金，您可以获得相同的效果：

.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;
}

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

具有子UL LI的CSS菜单

3 个答案: