懸停不工作的整個塊

我試圖創建整個錨元素的懸浮效果，但它不工作，只要鼠標離開下拉菜單消失的文字：懸停不工作的整個塊

Here是測試網站。

的CSS：

.menu{} 
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;} 
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;} 
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;} 
ul.sub_navigation , .sub_navigation 
{ 
    position: absolute; 
    display: none; 
    z-index: 100; 
    background-image: url('/images/menu-bg-png.png'); 
    background-repeat:repeat-y; 
    padding:10px 0px 10px 28px; 

}

我在哪裏得到它錯了嗎？

來源

2013-01-08 Mr A

CSS（添加）：

.menu li a { 
    position: relative; 
    z-index: 5; 
}

來源

2013-01-08 12:05:22 Joonas

但懸停鼠標不工作正確 –

@MrA的下劃線效果我不知道怎麼加position:relative和z-index:10（例如）它應該工作（你爲此寫了代碼，而不是我），這與問題有點不相干。 – Joonas

錨元素具有文本的大小，沒有別的。鏈接和鏈接之間的空間是李的右邊緣。

刪除

li {margin_right: 40px}

，並設置

a {padding_right: 40px}

來源

2013-01-08 12:05:02 vals

試試這個：

.menu > li:hover .sub_navigation { 
    display: block; 
}

來源

2013-01-08 12:06:19

在你r案例是因爲div #slider-container與#header div重疊。我看到#slider-container是絕對的。在TOP財產30PX，擺脫填充頂的 -

在這種情況下，你可以添加額外的20。
其他的事情做的只是對#header DIV

來源

2013-01-08 12:14:15

懸停不工作的整個塊

回答

相關問題