列表项目背景锚点链接 [英] List Items Background anchor link

问题描述

我正在研究：菜单列表

我想要做的是检查自己，如果我的方法是正确的。该网站在Wordpress上运行。

因此，我希望摆脱我们的服务，关于我们等文字。但我也想图形成为一个可点击的锚链接。

有没有人有任何想法来解决这个问题的最佳方式？

在此先感谢。 $ C>锚。这样写：

  .menu-header ul li a {
 display：block; 
 padding：70px 55px; 
 text-indent：-9999px; 
} 
 
 #access .menu-header ul li＃menu-item-26 a {
 background：url（http://i41.tinypic.com/345h0cw.png ）不重复; 
} 
 
 #access .menu-header ul li＃menu-item-24 a {
 background：url（http://i43.tinypic.com/15cikhs.jpg ）不重复; 
} 
 
 #access .menu-header ul li＃menu-item-23 a {
 background：url（http://i39.tinypic.com/dca82q.png ）不重复; 
} 
  

检查 http://jsfiddle.net/FN6f5/2/

I am working on this : Menu List

What I am trying to do is check with yourselves, If my approach is the right way. The site is running on Wordpress.

So ideally I'd like to get rid of the text "Our Services, About Us" etc.. But I'd also like the graphic to become a clickable anchor link.

Has anyone any ideas on the best way to approach this?

Thanks in advance.

解决方案

Give image inside anchor. Write like this:

.menu-header ul li a{
    display:block;
    padding: 70px 55px;
    text-indent:-9999px;
}

#access .menu-header ul li#menu-item-26 a{
    background: url(http://i41.tinypic.com/345h0cw.png) no-repeat;    
}

#access .menu-header ul li#menu-item-24 a{
    background: url(http://i43.tinypic.com/15cikhs.jpg) no-repeat;
}

#access .menu-header ul li#menu-item-23 a{
    background: url(http://i39.tinypic.com/dca82q.png) no-repeat;
}

Check this http://jsfiddle.net/FN6f5/2/

这篇关于列表项目背景锚点链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！