just found this marvelous website, so, I'm new in Wordpress. I have a HTML/CSS website developed from a PSD file. Everything was going OK, Header, Footer, but when I came across the WP menu, I'm just stocked. Here's a code menu example:

<div id="mainheader">
    <div id="menuprincipal">
    <img src="imagens/menu_alienhead.png" width="33" height="53" alt="Alien Head" style="margin-left: 15px; float:left" />
          <li><a href='#' class="menunews" title='News'> </a></li>
          <li><a href='#' id='menubiografia' title='Biografia'> </a></li>
etc etc
</div><!--Fim do menuprincipal-->

</div><!--Fim do mainheader-->

And the CSS for one example:

 a#menunews, a#menunews:link, a#menunews:visited, a#menunews:active {
background: transparent url(imagens/menu/menu_news.png) no-repeat left top;
display: block;
height: 55px;
width: 56px;
 a#menunews:hover {background-position: left bottom;}

Then I found that WP menus accepts classes, and I turn some of these itens into:

.menunews {
background: url(images/menu/menu_news.png) no-repeat left top;
height: 55px;
width: 56px;


    #navmenu li:hover {
background-position: left bottom;

My question is, can I build the menu using the first structure, with the ID's? I have no idea where the wp_menu list outputs are...

And using the classes, inside the menu admin panel, it works, but the Page Title stays above the image and the link works only on it, not in the image itself, like a block, like the original CSS.

For visual purposes, the menu should look like this website: http://www.realmofobscura.com/ it is by the way made with WP.

tutorials, links, anything, will be highly appreciated =)

  • Hey, Rafael here =) I've just find a way, but, it doesn't that it is the correct one. Using the wp_menu, I reworked the CSS using nth selectors, and the "only links the text link" problem, I used a 9999 text indent, plus a display:block (block-inline seems to work) But the topic is open to another solutions, better ones! Tkz!
    – Rafael
    Mar 15, 2012 at 23:25

1 Answer 1


Menus are very flexible, but are also quite complicated inside.

Start with wp_nav_menu() documentation for basic customization of container elements and such. You might need to tear it down to basic list items to integrate into more complex markup.

You can also use custom Walker, but I won't recommend any novice to go there (heh, most professionals seems to be scared of Walkers).

PS note that while asking about menu mechanics is on-topic, purely CSS questions ("how to get it look like this") are considered not specific to WordPress and better asked elsewhere.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.