2

WordPressのアクティブなメニュー項目に画像を配置しようとすると、難しい問題が発生します。htmlはワードプレスによって吐き出されるので、提示されたクラスを変更することはできません。私はなんとか素晴らしい柔軟なメニューを作成できましたが、この画像の配置を制御できないようです。

これは私が達成しようとしていることです> 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クラスで：after疑似要素を試しましたが、これはうまくいきませんでした。しかし、これを行う方法について立ち往生しているので、どんな助けでもいつものように大いに感謝されます:)

R

4

1 に答える 1

2

を使用できます: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;   
}
于 2012-12-03T22:47:06.823 に答える