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.