Each link should have two states in one image file. and the code is pretty simple. Here is a basic example. Basically what you want to do is slice your navigation images as they are and then place both states of the link into one graphic. Your css would need to be a bit different but the basic principal is there. So say each one is 50px high. Your graphic would be 100px tall with both states, your li a's will be styled to only be 50px tall and by using positioning on the background you show only the parts that need to be shown. by setting the - value on the hover state etc twice the 50px value because you want the hover portion to start bottom and go up to fill the li. Hope that makes sense.

You will also make the top and bottom of the link containers divs as well and place them above and below your link ul respectively.

e.g.

Code: Select all

.linktopcorners {
width:200px;
height:125px;
background:url("footop.jpg") top left no-repeat;
}

.linkbottomcorners {
width:200px;
height:125px;
background:url("foobottom.jpg") top left no-repeat;
}

Code: Select all

<div id="nav">
<div class="linktopcorners">&nbsp;</div>
<ul>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
<li><a href="">Link</a></li>
</ul>
<div class="linkbottomcorners">&nbsp;</div>
</div>

[ title and top corners ]
[ ----------link----------- ]
[ ----------link----------- ]
[ ----------link----------- ]
[ ----------link----------- ]
[ ---bottom corners ---]

Code: Select all

#nav {
padding:0;
margin:0;
width:200px;
}

#nav li {
list-style-type:none;
border:solid 1px #CCCCCC;
width:200px;
}

#nav li a {
width:200px;
height:100px;
display:block;
text-decoration:none;
background:#FFF url("Foo.jpg")  0px 0px no-repeat;
}

#nav li a:hover {
background:#FF6600 url("Foo.jpg")  0px -200px no-repeat;
}

__________________
I hate IE 6. Just sayin....