アクティブなメニュー項目にグラフィックを追加することをお探しですか？

Question

アクティブなメニュー項目に目盛りを追加したいのですが、私の現在のコードの使い方を理解できないようです。ここで私が達成しようとしているもののグラフィックだ（垂れ下がっ目盛りに気づく（）中心：。

どのような援助がいただければ幸いです

あなたがで現在のサイトが表示されることがあります。以下の要素のマウスオーバーに

http://www.redone.org/_dev/ski/menu2.html

Answer 1

current_page_item

そのため

変更背景画像を..//その色で一つの画像を作るコールのようなアウト

//これは疑似コードのようなものですあなたはjqueryの

li a:hover 

    { 
    background-image: url(images/callout.jpg); 
    } 

を使用することができますので、これはIE7で動作しません。

Answer 2

あなたの「現在の」メニュー項目には、追加のクラス（「現在の」など）を割り当てる必要があります。次に、現在のクラスのCSSルールを追加します。このルールは、余分なグラフィックを下部に表示します。

Answer 3

私は方向を指してくれてありがとう。ここで私のために働いていたもの：

#headerline { 
    overflow: visible; 
    border-bottom: 1px solid #2c5e93; 
    height: 40px; 
} 

#menu-main-menu li.current_page_item a{ 
    color: #014783; 
    background-color: #89cefa; 
} 

#menu-main-menu li.current_page_item { 
    height: 50px; 
    background-image:url(ski_tick.png); 
    background-position:center; 
    background-repeat:no-repeat; 
} 

Answer 4

この問題を解決する最も一般的な方法は、他の回答に示されている背景イメージの解決策です。この特別な図形である三角形はHTML + CSSで簡単に作成できるので、いい選択肢もあります。画像、キャンバス、SVG/VML、プラグインは不要です。

<div style=" 
    position:absolute; 
    width:0; 
    right:0; 
    border: 10px solid #fff; 
    border-top-color: #000; 
    "></div> 

私はbasic example of a menu using this techniqueを作成しました。 CSSのポリゴンについては、少なくとも2001年にはTantek Çelikで調査されました。