：ホバーは固定領域のみをカバーしていますか？

Question

ここに新しい質問があります。

メニュー項目にマウスオーバーすると、固定領域のみが強調表示されます。問題は、メニュー上の次の項目は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語の項目に対してはすべて可能です。

ありがとうございます。

Answer 1

リンクは2行のテキストで表示され、2行目は表示されませんか？
その場合は、高さを#navlist li a spanから削除してください。これは役に立ちますが、レイアウトを破ることもできます。