html - 带有子 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

更改以下样式以适应顶部 7 像素边框和 float div。

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 */
}