Html CSS菜单与子ulli

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

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

我想

文字装饰：没有正在修复效果。我在JSFIDLE上传了我的全部菜单

查看以下更新的小提琴：

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

在小提琴中，我在CSS中给了它们一个宽度

nav ul li {
    width: 200px;
}

上下移动是从悬停期间出现在菜单顶部的大边框开始的。
更改以下样式以适应顶部和浮动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 */
}

您可以切换到使用“长方体阴影”属性，而不是使用边框顶部：


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

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

你确实有一堆
：悬停
样式当然可以，但不可以移动我的文本。那么你能澄清你的问题吗？你的“当然”与你最初的“我没有任何悬停效果”不符。我不确定你现在的问题是什么…顶部有7px边框当然会将文本向下移动7px:）它移动是因为悬停时的
边框顶部
，子菜单比其父菜单长（宽）。