The CSS
First we need to make the nested list inline. This is done by floating the list to the left (which makes it as wide as its content, and remove the list style. We need to add a margin to the left to counteract the padding we will add in between the tabs. We also need a padding on the bottom to show the background fade. Say our padding between the tabs will be 4 pixels.
#nav{
clear:both;
font-weight:bold;
color:#666;
margin-left:4px;
float:left;
list-style-type:none;
background:url(navshadow.gif) no-repeat 8px 100% #fff;
padding-bottom:21px;
}
For some reason there is a difference between MSIE and real browsersFirefox and Opera here.
That is why we need to hack:
html>body #nav{
margin-left:8px;
background:url(navshadow.gif) no-repeat <strong>4px</strong> 100% #fff;
}
The whole trick of the navigation has been done many times before, but just to reiterate:
We use the same background image on the LI and on the A/STRONG inside it.
On the LI we position it to the left and top and allow it to fade out onto a background colour. We add a padding to the left to show a bit of the background.
#nav li{
list-style-type:none;
float:left;
margin:0 0 0 4px;
padding:0 0 0 10px ;
border-bottom:1px solid #999;
background:url(tabgrey.gif) #c0c0c0 top left no-repeat;
}
On the A/STRONG we position the same background image top and right and give it a padding to the right to show that bit of the background. We do not define a background colour for the rest but leave it transparent - effectively allowing the LI background to show through.
#nav li a{
color:#666;
background:url(tabgrey.gif) transparent top right no-repeat;
display:block;
padding:0 10px 0 0;
}
For the current page we use other images and colours:
#nav li.cur,
#nav li.over,
#nav li:hover
{
background:url(tabblue.gif) #3375b2 top left no-repeat;
border-bottom:1px solid #036;
}
#nav li strong,
ul#nav li.cur a,
ul#nav li.over a,
ul#nav li:hover a
{
display:block;
color:#fff;
padding:0 10px 0 0;
text-decoration:none;
background:url(tabblue.gif) transparent top right no-repeat;
}
The li:hover and li:hover a ensures that both the list item and the link background image get changed when the mouse hovers over it - on modern browsers. To support MSIE we need to add the over class and a small JavaScript.