位置的背景圖像上靈活的導航

Question

我得嘗試在WordPress的活動菜單項位置的圖像的棘手問題。在HTML是由WordPress吐出來，所以我不能改變我帶有我已經成功地創建一個不錯的靈活菜單中的類，但我似乎無法克服這一形象的定位控制。

這就是我想要達到>http://i48.tinypic.com/1pyzqo.png

下面是HTML，這裏是一個小提琴>http://jsfiddle.net/rafoggin/cwA7Y/1/

HTML：

<nav id="navigation" class="menu-main-navigation-container"> 

<ul id="main-menu" class="item-list inline links small"> 

<li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="http://richardfoggin.co.uk/pinkfloyd/about">About</a></li> 

<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-55 current_page_item menu-item-57"><a href="http://richardfoggin.co.uk/pinkfloyd/">Portfolio</a></li> 

<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://richardfoggin.co.uk/pinkfloyd/blog">Blog</a></li> 

</ul> 

</nav>​ 

而CSS：

nav#navigation { 
    position:absolute; 
    top:0; width:100%; 
    padding:20px 0 0; 
    border-bottom:1px solid #dedede; 
    background: #FFFFFF; 
} 

nav#navigation ul#main-menu { 
    list-style-type: none; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
} 

nav#navigation ul#main-menu li{ 
display: inline-block; 
} 

nav#navigation ul#main-menu a{ 
    display: block; 
    text-decoration: none; 
    color: black; 
    padding: 8px; 
    margin: 0 9px; 
} 


li.current_page_item a { 
    background: url(http://richardfoggin.co.uk/pinkfloyd/wp-content/themes/svbtle/images/menu-bg.png) no-repeat 50% 100%; 
    border-bottom: solid 1px #fff; 
} 

我已經嘗試了：以後在li.current僞元素_page_item一類，但這並沒有切中要害。但堅持有關如何做到這一點，任何幫助將不勝感激一如既往:)

[R

Answer 1

您可以使用:after，但你需要將它與絕對定位相結合。您還需要給這個定位項目一個大小。

nav#navigation ul#main-menu a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    padding: 8px; 
    margin: 0 9px; 
    position:relative; <--- you need this 
} 

li.current_page_item a:after { 
    background: url(http://richardfoggin.co.uk/pinkfloyd/wp-content/themes/svbtle/images/menu-bg.png); 
    border-bottom: solid 1px #fff;  
    position:absolute; 
    content: ""; 
    top:16px; 
    left:30px; 
    width:18px; 
    height:20px; 
}