現在のページのナビゲーションメニューの背景画像

Question

私はこれに取り組んできました。私が望むものの例として、jsFiddleです。基本的に、 "li.current_page_item"には背景イメージがあります。クリックしたときにテキストを囲むようにしたいのですが。

画像サイズは146（W）×44（H）私もそれで少し難しさを有し、いくつかの助けを探しています

。私はグラフィックを1つのサイズにしましたが、それはより簡単な方法でした。

誰でも私を助けてくれると思います。バックグラウンドが各アクティブな項目に切り替わることを確認して、明らかにリスト項目がジャンプするのを防ぎます。

ありがとうございます。

Answer 1

背景画像が完全に表示されない2つの理由があります。インライン要素（SOセットheight又はwidthを持つことができない）であるliタグにheightとwidthを設定しているので

最初です。したがって、これをblockまたはinline-block要素に設定する必要があります。

li.current_page_itemのネストされたアンカータグに背景画像を設定しています（heightまたはは設定されていません）。これを解決するには、背景画像をli.current_page_item CSSに移動するだけです。

したがって、次のCSSは動作します：

.menu li.current_page_item { 
    background: url(http://i42.tinypic.com/2mnhvh0.png) no-repeat 0 0 transparent; 
} 

.menu li { 
    .... 
    display: inline-block; 
    *display: inline;  /* for IE7*/ 
    *zoom:1;    /* for IE7*/ 
    line-height: 44px; /* center text vertically */ 
    text-align: center; /* center text horizontally */ 
    .... 
} 

の作業例：http://jsfiddle.net/9aUaK/2/