HTML and CSS Reference
In-Depth Information
nav.horizontalNAV li a {
color: rgb(255, 255, 99);
}
nav.horizontalNAV li a:hover {
color: white;
}
Figure 4-20
Styling the horizontal navigation list
removes underlin
ing from all
links within navigation lists
floats the list item
s in the
horizontal navigation list
sets the link color
in the
horizontal list to yellow
sets the hover col
or in the
horizontal list to white
◗
3.
Save your changes to the file.
Next, you'll change the reset style sheet rules so that the horizontal navigation list
is once again displayed.
◗
4.
Return to the
cp_reset.css
style sheet in your text editor and then scroll down to
the style rule at the bottom of the page. Remove the selector
nav.horizontalNAV
along with the comma separator that follows it from the start of the selector list.
◗
5.
Save your changes to the reset style sheet and then reload
cycle.htm
in your Web
browser. As shown in Figure 4-21, the hypertext links are now rendered in a single
row across the top of the page.
◗
6.
Verify that the color of each link changes to white in response to the hover event.
Figure 4-21
Horizontal navigation list
each list item is
floated left, creating
a row of items
Vaclav Volrab/Shutterstock.com
