Technique learned on IWDN, developed by member BigBison. <!-- XHTML Unordered List -->

    <div id="amenu">
        <ul>
            <li class="home">
                <a href="index.html">
                Home<span></span>
                </a>
            </li>
            <li class="blog">
                <a href="blog.html">
                Weblog<span></span>
                </a>
            </li>
            <li class="contact">
                <a href="contact.html">
                Contact<span></span>
                </a>
            </li>
        </ul>
    </div>
/* Image Replacment - Accessible Menu */

div#amenu{
    /* Your custom styling for the menu container. */
    background:#FFFFCC;
}

div#amenu ul, div#amenu ul li, div#amenu ul li a, div#amenu ul li a span{
    /* Necessary default styles. */
    /* Only change height and text-align if desired. */
    display:block;
    margin:0;
    padding:0;
    height:20px;
    text-align:center;
    /* Add any desired margins, padding, or borders to elements below individually. */
}

div#amenu ul li, div#amenu ul li a, div#amenu ul li a span{
    /* You can use variable widths by using individual classes. */
    /* Or make each button the same width here. */
    width:100px;
}

div#amenu ul{
    /* Your custom styling. */
    list-style:none;
}

    div#amenu ul li{
        /* Creates a horizontal line of items from the unordered list. */
        float:left;
    }

        div#amenu ul li a{
            /* Only change color, font, text, and (maybe) overflow properties. */
            position:relative;
            color:blue;
            font:bold 10pt "century gothic", sans-serif;
            text-transform:uppercase;
            text-decoration:none;
            overflow:hidden;
        }

        div#amenu ul li a span{
            /* Important: Causes the span element's background to overlap the plain-text link. */
            position:absolute;
            top:0px;
            left:0px;
        }

            /* Change your desired colors. */
            /* Using one background image and changing its position (rather than multiple images) improves performance. */
            /* Ensure that your plain text menu's font colors and styles and background colors harken to your image menu. */
            /* Accessibility guidelines recommend that you suggest a state change with more than just color, however, so keep that in mind. */
            div#amenu ul li a:visited{
                color:purple;
            }
            div#amenu a:visited span{
                background-position:center bottom;
            }

            div#amenu ul li a:hover{
                color:red;
            }
            div#amenu a:hover span{
                background-position:center top;
            }

            div#amenu ul li a:active{
                color:red;
            }
            div#amenu a:active span{
                background-position:center bottom;
            }

        /* Set your individual image menu buttons here. */
        li.home a span{
            background:url(amenu_home.jpg) center center no-repeat;
        }

        li.blog a span{
            background:url(amenu_blog.jpg) center center no-repeat;
        }

        li.contact a span{
            background:url(amenu_contact.jpg) center center no-repeat;
        }