Tricky Menu (HTML + CSS) for a WordPress template - html

Question

So we have the menu above. That I need to construct for a WordPress template. I have no idea how to make the hover and active states. Untill now I have this:
HTML (followed how WordPress will generate the code):
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li>
<a href="#" title="">
Home
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
<li>
<a href="#" title="">
Menu Link
</a>
</li>
</ul><!-- #menu-primary-navigation -->
</div><!-- .menu-primary-navigation-container -->
</nav><!-- #access -->
Then I have the CSS:
#nav-main {
width: 956px;
height: 44px;
border: 1px solid #a5a5a5;
background: url(images/bg-nav-main.jpg) repeat-x;
}
.menu-primary-navigation-container {}
#menu-primary-navigation {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu-primary-navigation li {
height: 44px;
display: inline-block;
}
#menu-primary-navigation li a {
color: #ffffff;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 16px;
text-decoration: none;
line-height: 44px;
padding: 0 46px;
}
#menu-primary-navigation li a:hover {}
And this is all. Here I am stucked. Those slashes are the bad points of this menu.
Any ideas?

Answer 1

Make graphics that way:
Yellow represents transparent color.
Then add negative margin to <li> so they will be next to each other without spaces.

Answer 2

To make the active state you have to add some php to the menu to check the current site:
<nav id="nav-main" role="navigation">
<div class="menu-primary-navigation-container">
<ul id="menu-primary-navigation" class="menu">
<li <?php if (is_page('home')) { echo "class='active'"; }?> >
<a href="#" title="">
Home
</a>
</li>
<li <?php if (is_page('menulink')) { echo "class='active'"; }?> >
<a href="#" title="">
Menu Link
</a>
</li>
For more information read this tutorial here: Tutorial
Then you have to make rectangular images for each menubutton and define it for the <li> elements as a background. You can also make one for all menu elements. With the 'active' class, which get set up by wordpress, you can define a different background for the active menu element.
For the hover of the menu elements you just have to add a background definition in css for
#menu-primary-navigation li a:hover {}