Using CSS ID's and Classes with images in a Wordpress Horizontal Menu

Question

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" />
    <ul>
          <li><a href='#' class="menunews" title='News'> </a></li>
          <li><a href='#' id='menubiografia' title='Biografia'> </a></li>
etc etc
</ul>
</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;
display:block;
}

and

    #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 =)

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.