List Items Background Anchor Link

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

Solution 1:

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/

Solution 2:

I would do this for removing the active link text. However i would suggest making each button image the same height so you can align them horizontally in a nice way. Widths can change but just adjust the css accordingly.

http://jsfiddle.net/FN6f5/3/