A hover horizontal Menu with background images

<!-- You must build this code into - head -->
Step 1.
<style type="text/css">
#navlist ul
{
margin: 0;
white-space: nowrap;
padding: 0;
}

#navlist li
{
display: inline;
list-style-type: none;
}

#navlist a
{
padding: 1px 8px 1px 24px;
border: 1px solid #333;
background-color: #999;
background-image: url(l1_down.gif);
}

#navlist a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
}

#navlist a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(l1_over.gif);
color: #333;
}

#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #333;
background-color: #FF6600;
background-image: url(l1_over.gif);
color: #333;
}
</style>
Step 2.
<!-- You must build this code into - body -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Art Gallery</a></li>
<li><a href="#">Pablo Picasso</a></li>
<li><a href="#">Wassily Kandinsky</a></li>
<li><a href="#">Salvador Dali</a></li>
<li><a href="#">Henri Matisse</a></li>
</ul>
</div>

Needed images »

Menu images with bullets

Step 1. - HTML list with bullets

Step 2. - To remove the HTML list bullets, set the "ul { list-style-type: none; }" to "none".

<!-- You must build this code into - head -->
Step 1.
<style type="text/css">
ul
{
list-style-type: none;
}
 a:link {color: #000066; text-decoration: None} 
 a:visited {color: #000066; text-decoration: None} 
 a:hover {color: #000066; font-weight: Bold} 
 a:active {color: #FF0033; font-weight: Bold}
</style>
Step 2.
<!-- You must build this code into - body -->
<ul id="navigation">
    <li><a href="#">Example</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Example</a></li>
    <li><a href="#">Example</a></li>
</ul>