Basic list styling is very simple. Say you start with this simple to-do list:
<ul>
<li>Read emails</li>
<li>Write book</li>
<li>Go shopping</li>
<li>Cook dinner</li>
<li>Watch Scrubs</li>
</ul>
The first thing you want to do is remove the default bullets and zero down the margin and
padding:
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}li {
background: url(bullet.gif) no-repeat 0 50%;
padding-left: 30px;
}
Creating a vertical nav bar
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li>
<li><a href="work.htm">Our Work</a></li>
<li><a href="news.htm">News</a></li>
<li><a href="contact.htm">Contact</a></li>
</ul>
The background image is aligned left in order to reveal the up state. The anchor text is
given a 50-pixel indent so that it is not sitting directly over the arrow in the background
image.
ul a {
display: block;
width: 200px;
height: 40px;
line-height: 40px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif)
left middle;
text-indent: 50px;
}
If you look at the rollover image
ul a {
display: block;
width: 200px;
height: 39px;
line-height: 39px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy-rollover.gif) no-repeat ➥
left bottom;
text-indent: 50px;}
The links now stack up nicely, with a single black line appearing between each one.
However, the top black line on the first link is no longer showing. To put this back you
need to reset the height of the first anchor to 40 pixels—the full height of the image. You
can do this by applying a class of first to the first list item:
li.first a {
height: 40px;
line-height: 40px;
}
The list now looks like a stylish vertical navigation bar. To complete the effect, the last
thing you need to do is apply the hover and selected states.
a:hover, .selected a {
background-position: right bottom;
color: #fff;
}
This technique should now work in all the major browsers except IE for Windows.
Unfortunately, IE inexplicably adds extra space above and below the list items. To fix this
bug, you need to set the display property on the list items to inline:
li {
display: inline: /* :KLUDGE: Removes large gaps in IE/Win */
}
And there you have it: a styled vertical nav bar, complete with rollovers.
