：懸停只覆蓋固定區域？

當我在菜單項上進行鼠標懸停時，只有固定區域被高亮顯示。問題在於菜單上的下一個項目由2個長單詞組成，懸停並不能覆蓋全部，只有一部分。下面是使它發生代碼：

navlist { 
    margin-left: -3px; 
    padding-left: 0px; 
    white-space: nowrap; 
    position: absolute; 
    height: 26px; 
    width: 777px; 
    top: 225px; 
    background: url(images/mb2.jpg) repeat-x top left; 
    font-family: Arial; 
    text-transform: uppercase; 
    font-size: 12px; 
    line-height: 20px; 
} 
#navlist li { 
    display: inline; 
    list-style-type: none; 
} 
#navlist li a { 
    padding: 3px 10px; 
    height: 20px; 
    width: 91px; 
    display: inline; 
    position: absolute; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none; 
    margin-top: 5px; 
} 
#navlist li a span { 
    padding: 3px 10px; 
    height: 20px; 
    width: 71px; 
    display: inline; 
    position: absolute; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none; 
    margin-top: -5px; 
    font-weight: bolder; 
} 


#navlist a:hover { 
    background: #0687eb; 
    height: 10px; 
    cursor: pointer; 
}

有什麼事情可以是固定的（包括菜單項的兩個詞我試着用寬打：91px;值 - 問題是，它可以增加被覆蓋的區域，但當它覆蓋第一個時，它會變長並侵害其他菜單項）

謝謝。理想情況下，我想僅突出顯示文本（文本的字母） - 但不知道是否可以完成這項操作，用於2個字的項目）

謝謝。

來源

2012-01-17 Elijah

你能提供[jsFiddle]（http://jsfiddle.net）嗎？ – animuson 2012-01-17 22:07:19

帶有「display：inline」的項目不應具有「寬度」或「高度」。這些值僅適用於塊級別或塊類型項目 – Ktash 2012-01-17 22:08:19

@Ktash，但是他再次使用'position：absolute;'來覆蓋該值。 – Neil 2012-01-17 22:20:25

您的鏈接是兩行文字，第二行不能徘徊？
如果是這樣，請嘗試從#navlist li a span中移除高度。這可能有所幫助，但也可以打破布局。

來源

2012-01-17 22:29:07

：懸停只覆蓋固定區域？

回答

相關問題