If you are using a list of links, there are many ways to use CSS to change their appearance. This page covers some of the basics.
To create a basic list of links, these two CSS rules generate the list on the right:
ul.list1 {
width: 6em;
padding: 0;
list-style-type: none;
}
ul.list1 li a {
display: block;
color: #000;
background-color: #ccf;
padding: 0.5em;
margin: 0.5em 0;
text-decoration: none;
}
You can change the colors of the links and link text in the second rule. If you wish to preserve the underlines under the links, you would remove the text-decoration declaration.
The display: block makes sure that the links fill the full width of the enclosing <ul></ul>, and the margin is what forces the white space between the items; removing the margin will eliminate the space. You can change the space to a different color by defining a background color for the <ul></ul>, but it would look different on Internet Explorer than it would for Netscape, Mozilla or Safari - IE will show the color above and below the list in addition to in between, since it collapses margins differently than the other browsers.
ul.list2 {
width: 6em;
padding: 0;
list-style-type: none;
}
ul.list2 li {
margin: 0;
}
ul.list2 li a {
display: block;
color: #000;
background-color: #ccf;
border-right: 0.55em solid #66f;
padding: 0.25em 0.5em;
text-decoration: none;
}
ul.list2 li a:hover {
color: #fff;
background-color: #66f;
border-right-color: #00f;
}
You can create many hover effects for your list of links. In this example, the background color, right border, and text color are changed. You can also have a background image which changes.
The margin: 0 for the <li></li> elements is needed for Opera 6 to eliminate any space between the links. Also, Opera 6 will not change the color of the border with these CSS definitions.
Be careful about changing the size or style of the font for the hover effect, since that can change how the text is rendered. In extreme cases, the text will flow differently or cause the containers to change size, causing everything below to reflow. This makes the text harder to follow.
If you try these kinds of menus on Internet Explorer for Windows, you may find that the items aren't completely joined. Notice the difference between the two different sources for the previous example and these screen captures using Internet Explorer on Windows. First, the list as in the source above:
<ul class="list2">
<li><a href="#">
Item 1
</a></li>
<li><a href="#">
Item 2
</a></li>
<li><a href="#">
Item 3
</a></li>
</ul>
Second, the list with a more compact version of the source:
<ul class="list2">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
Notice that the second version isn't what we wanted. As it ends up, the critical difference is that there is some sort of whitespace after the link text and before the </a> tag for the items. Without that whitespace, Internet Explorer will insert an extra blank line between the list items. You can sometimes get around this by defining a non-zero border or padding for the bottom of the <li></li> items, but it's usually easier to ensure that the whitespace is in the HTML.
ul.list3 {
width: 15em;
padding: 0;
list-style-type: none;
}
ul.list3 li {
display: inline;
}
ul.list3 li a {
color: #000;
background-color: #ccf;
padding: 0.25em 0.5em;
text-decoration: none;
}
ul.list3 li a:hover {
color: #fff;
background-color: #33f;
}
Lists can also span horizontally, as this example shows. The display: inline declaration is what causes the links to sit next to each other rather than atop each other.
This example shows that you can also use hover effects for this kind of list.
As with the previous example, you must make sure that there is some sort of whitespace between the link text and the </a> tags. In the case of a horizontal list, you will end up with an extra horizontal space between the list items.