CSS Image Slider

<style type="text/css">
#slider {
padding:0;
margin:0 auto 5em auto;
list-style-type:none;
overflow:hidden;
width:495px;
height:240px;
border:1px solid #888;
background:#000000 url(images/main2.gif);
}
#slider li {
float:left;
}
#slider li a {
display:block;
height:240px;
width:28px;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#slider li a img {
width:28px;
height:240px;
border:0;
}
#slider li a:hover {
background:#eee;
width:320px;
}
#slider li a:hover img {
width:320px;
}


#galleryie {
padding:0;
margin:0 auto;
list-style-type:none;
overflow:hidden;
width:695px;
height:240px;
border:1px solid #888;
background:#fff url(images/main2.gif);
}
#galleryie li {
float:left;
}
#galleryie li a {
display:block;
height:240px;
width:28px;
overflow:hidden;
float:left;
text-decoration:none;
border-right:1px solid #fff;
cursor:default;
}
#galleryie li a img {border:0;}
#galleryie li a:hover {
background:#eee;
width:320px;
}

</style>

ul id="slider">
<li><a href="#slide Gallery">
<img src="images/green.jpg" alt="1" title="Nicole Rutter" /></a></li>
<li><a href="#slide Gallery">
<img src="images/blue.jpg" alt="2" title="Nicole Rutter" /></a></li>
<li><a href="#slide Gallery">
<img src="images/purple.jpg" alt="3" title="Nicole Rutter" /></a></li>
<li><a href="#slide Gallery">
<img src="images/red.jpg" alt="4" title="Nicole Rutter" /></a></li>
<li><a href="#slide Gallery">
<img src="images/yellowish.jpg" alt="5" title="Nicole Rutter" /></a></li>
<li><a href="#slide Gallery">
<img src="images/Brightblue.jpg" alt="6" title="Nicole Rutter" /></a></li>
<li><a href="#slide Gallery">
<img src="images/grey.jpg" alt="7" title="Nicole Rutter" /></a></li>
</ul>