CSS菜單欄的問題

這是我的CSS：CSS菜單欄的問題

.nav { 
    margin: 0px; 
    padding: 0px; 
    list-style: none; 
    display: table; 
    width:100%; 
    text-align: center; 
    position: relative; 
} 
.nav li { 
    display: table-cell; 
} 
.nav li a { 
    background: #FF0000; 
    color: #fff; 
    display: block; 
    padding: 7px 8px; 
    text-decoration: none; 
} 
.nav li a:hover { 
    background-color:#000; 
    border:1px solid #fff; 
} 
.nav ul { 
    display: none; 
    position: absolute; 
    margin-left: 0px; 
    list-style: none; 
    padding: 0px; 
    display: table; 
    width: 100%; 
    left: 0; 
    visibility: hidden; 

} 
.nav li:hover ul { 
    visibility: visible; 
} 
.nav ul li { 
    display: table-cell; 
} 
.nav ul a { 
    display: block; 
    height: 15px; 
    padding: 7px 8px; 
    color: #fff; 
    text-decoration: none; 
    border-bottom: 1px solid #222; 
} 
.nav ul li a:hover { 
    color: #069; 
}

的jsfiddle：http://jsfiddle.net/spog4sqg/3/

這裏的時候，將鼠標懸停在HOME顯示text-decoration:underline;，當鼠標懸停在其他剩餘的列表中，顯示像這個：http://s7.postimg.org/br5nkl8zf/Untitled_1_copy.png

我可以知道，什麼是確切的CSS屬性來解決這個問題。

在此先感謝..

來源

2014-09-03 sasi

沒有'文字裝飾：下劃線;'當鼠標懸停在'你撥弄鏈接HOME'，請問是什麼問題，有什麼辦法 – Kyojimaru 2014-09-03 05:40:21

@Kyojimaru：你看到我的貼圖片？ – sasi 2014-09-03 05:42:13

是的，但我真的不明白是什麼問題，因爲沒有'下劃線'無論是在小提琴或你的張貼圖像，你期望或想要它應該是 – Kyojimaru 2014-09-03 05:46:57

我猜，這不是下劃線屬性，你的意思是你想，當你徘徊子列表懸停狀態保持活躍。

爲此，請在列表項上觸發懸停效果，而不是錨點。

變化：

.nav li a:hover { 
    background-color:#000; 
}

要：

.nav li:hover a { 
    background-color:#000; 
}

Updated Fiddle。

[編輯]

希望我理解您的評論的權利。用'下劃線'表示子菜單是否具有背景色？然後將其更改爲：

.nav li:hover ul li a { 
    background-color:#000; 
}

Updated Fiddle 2。

來源

2014-09-03 05:57:30 LinkinTED

感謝您的回答，但HOME->懸停效果只需加下劃線，但現在顯示下劃線和背景色效果。 – sasi 2014-09-03 06:07:23

@sasi，看到編輯。 – LinkinTED 2014-09-03 06:26:40

基本上這是你在找什麼：

.navigation > ul li:first-child a:hover { 
    background-color: red; 
    text-decoration: underline; 
}

See Example

來源

2014-09-03 06:08:45 Oriol

我用：第一，孩子僞類，希望幫助？

.nav li:first-child a:hover { 
    text-decoration: underline; 
}

http://jsfiddle.net/w81swq5j/2/

來源

2014-09-03 06:15:26 Lucre

CSS菜單欄的問題

回答

相關問題