Rollover horizontal list Menu

<!-- You must build this code into - head -->
Step 1.
<style type="text/css">
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}

#navlist li a
{
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>
Step 2.
<!-- You must build this code into - body -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Pablo Picasso</a></li>
<li><a href="#">Vincent van Gogh</a></li>
<li><a href="#">Wassily Kandinsky</a></li>
<li><a href="#">Salvador Dali</a></li>
<li><a href="#">Henri Matisse</a></li>
<li><a href="#">Edgar Degas</a></li>
</ul>
</div>

Menu images with bullets

Step 1. - HTML list with bullets

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

<!-- You must build this code into - head -->
Step 1.
<style type="text/css">
 a:link {color: #000091; text-decoration: None}
 a:visited {color: #0000FF; text-decoration: None}
 a:active {color: #000000; text-decoration: None}
 a:hover {color: #000000; text-decoration: Underline}
</style>
<!-- You must build this code into - head -->
Step 2.
<style type="text/css">
ul
{
list-style-type: none;
}
 a:link {color: #000091; text-decoration: None}
 a:visited {color: #0000FF; text-decoration: None}
 a:active {color: #000000; text-decoration: None}
 a:hover {color: #000000; text-decoration: Underline}
</style>
<!-- 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>