с использованием фоновых изображений для замены текстовой ссылки в меню

Question

Я использую фоновое изображение для замены текста пунктов меню на своем веб-сайте. Я использую Wordpress меню.

<?php wp_nav_menu($args); ?> 

он отлично работает при использовании текста, но затем я добавил некоторые фоновые изображения для замены текста и теперь ссылки не работают больше.

вот мой CSS:

#menu-item{width:199px;} 
#menu-item-49{background: url('../../../../wp-content/uploads/menu/hit.png');height:29px;width:199px;} 
#menu-item-49.active,#menu-item-49.current-menu-item, #menu-item-49.current-post-parent{background: url('../../../../wp-content/uploads/menu/hit_active.png')} 
#menu-item-51{background: url('../../../../wp-content/uploads/menu/style.png');height:36px;} 
#menu-item-51.active,#menu-item-51.current-menu-item, #menu-item-51.current-post-parent{background: url('../../../../wp-content/uploads/menu/style_active.png')} 
#menu-item-50{background: url('../../../../wp-content/uploads/menu/kulture.png');height:38px;} 
#menu-item-50.active,#menu-item-50.current-menu-item, #menu-item-50.current-post-parent{background: url('../../../../wp-content/uploads/menu/kulture_active.png')} 
#menu-item-48{background: url('../../../../wp-content/uploads/menu/guest_editor.png');height:30px;} 
#menu-item-48.active,#menu-item-48.current-menu-item, #menu-item-48.current-post-parent{background: url('../../../../wp-content/uploads/menu/guest_editor_active.png')} 
#menu-item-47{background: url('../../../../wp-content/uploads/menu/coulisses.png');height:36px;} 
#menu-item-47.active,#menu-item-47.current-menu-item, #menu-item-47.current-post-parent{background: url('../../../../wp-content/uploads/menu/coulisses_active.png')} 

поэтому каждый пункт меню имеет свое собственное фоновое изображение, а также изменения, когда элемент активен, текущий или один из родителей, (я также с помощью JQuery для анимации при наведении курсора мыши, но это не имеет никакого отношения к моей проблеме).

вот HTML выход:

<div class="menu-menu-container"><ul id="menu-menu" class="menu"><li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-49"><a href="/hit-de-la-semaine/">Hit de la semaine</a></li> 
<li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-51"><a href="/category/style/">Style</a></li> 
<li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-50"><a href="/category/k-ulture/">K-ulture</a></li> 
<li id="menu-item-48" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-48"><a href="/category/guest-editor/">Guest Editor</a></li> 
<li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47"><a href="/category/coulisses/">Coulisses</a></li> 
</ul></div> 

Я предполагаю, что мой фоновое изображение находится за пределами «<a></a>», но я не могу найти решение, чтобы исправить это ... Я думаю, что есть простое решение, но Я застрял прямо сейчас ...

Кто-нибудь может мне это помочь?

Большое спасибо за вашу помощь,

Answer 1

Вы бы не хотели ссылочную тег вне литиево начала и конца тегов? Тогда все внутри LI тег должен связать включая ваше изображение:

<div class="menu-menu-container"><ul id="menu-menu" class="menu"><a href="/hit-de-la- 
    semaine/"> <li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item- 
    object- category menu-item-49">Hit de la semaine</li></a> 

Answer 2

Это правило CSS не относится ни к чему, так как вы, кажется, не имеют каких-либо элементы с этим ID:

#menu-item{width:199px;} 

Для другие ваши правила, я предложил бы переписывать их от

#menu-item-49 { .. } 
#menu-item-49.active, 
#menu-item-49.current-menu-item, 
#menu-item-49.current-post-parent { .. } 

в

li#menu-item-49 a { .. } 
li#menu-item-49.active a, 
li#menu-item-49.current-menu-item a, 
li#menu-item-49.current-post-parent a { .. } 

Добавить в display: block к своим правилам, чтобы использовать ширину, указанную вами в вашем CSS, в размере <a>.

в вашем $args для wp_nav_menu, добавьте

'link_before' => '<span>', 'link_after' => '</span>' 

Тогда вы можете "скрыть" нормальный текст ссылки, например,

li.menu-item span { 
    left: -9999px; 
    position: absolute; 
}