具有子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;
}

上下移動來自您在懸停期間出現在菜單頂部的大邊框。