リストのリンク - 一貫性のあるa：ホバー効果を得る

Question

リンクのリストを作成してそれらのリンクにa：ホバー状態を与えると、ホバー上で強調表示する箇条書きポイントを含むリンク全体が必要になります。しかし、私のリストの幅がAsより広く定義されているため、LIは：の前にホバーと色を変更します。これは乱雑に見えます！このように：

http://jsfiddle.net/NgWLR/

私が何を意味するかを参照してください？ A&のようにLIは別々のエンティティであり、異なるタイミングでトリガします。

ディスプレイ：ブロックをAスタイリングに追加しようとすると、Firefoxのディスプレイに関する奇妙な問題が発生する&他のブラウザでは少し改善されていますが、確かに問題は解決しません。

私は誰にも負けないのlist-style-typeを変更して置くことができますが、弾丸エンティティの前に私れるLIの上に、そのような：

http://jsfiddle.net/tScnS/2/

そして、それは時のSafari & Firefoxで、正常に動作するようです少なくとも、解決策としては、すべてのブラウザでサポートされていないような/厄介であるようです。

誰かがこれを動作させるには「弾丸防止」（hah！）の方法を知っているか、2番目のJSfiddle-list-style-noneのように実装してください。 ありがとう！

Answer 1

あなたは例えば、リンクのスタイルをli:hover aの代わりa:hoverを使用することができますチェックイン：http://jsfiddle.net/NgWLR/2/

PS：例を示す際に無関係なコードを削除してください。

Answer 2

ご理解のとおり、<a>タグからdisplay:blockを削除してください。このように：

この http://jsfiddle.net/NgWLR/1/