調整下拉指示符圖像的位置

Question

我想添加一個下拉箭頭的菜單項有子菜單，並希望調整圖像的位置，以便它直接位於菜單鏈接下方並居中。我怎樣才能調整圖像的位置？

這是我目前的CSS：

nav li.hasChild:after { 
    content: url(../images/layout/dropdownOver.png); 
} 

這直接增加了圖像菜單項的權利，但我不知道如何重新定位。

謝謝！

Answer 1

使用該CSS代替：

nav li.hasChild:after { 
    content: url(../images/layout/dropdownOver.png); 
    display: block; 
    margin-left: -10px; 
} 

或者您可以使用此：

nav li.hasChild { 
    background-image: url(../images/layout/dropdownOver.png); 
    background-repeat: no-repeat; 
    background-position: right; 
} 

然後在圖像中，你需要把一個透明的邊框邊緣

Answer 2

我想出了有兩種不同的方法。

首先是很多像你這樣的，直接使用content: url(path_to_image)：JS Bin

這是由於兩種.menu-item加入display: block;完成，這是:after，導致「斷行」。 text-align: center;注意將圖片居中，因爲它的默認display屬性設置爲inline。

另一種是有一點不同：JS Bin

的概念是一樣的，但現在我們正在使用的箭頭圖像作爲:after而不是content的background。 我確實生成了更多的代碼，但是在定位僞元素時給了你更多的靈活性。