Chapter 5: Building a Shopping Cart
136
Next, create the look and feel for the cat and subcat < li > classes. A good suggestion is to make the
cat class a different background color with slightly bigger text. Another good idea is to indent the
subcat class more to show a hierarchy.#nav ul li.cat{
background-color:#31363e;
font-size:1em;
padding-left:5px;
}#nav ul li.subcat{
padding-left:15px;
font-size:.9em;
}Next, set up the look and feel for the cat and subcat links. Again, reuse the border color as the
background color for the cat < li > elements, but use no background color for the subcat < li >
elements. Note the different colors used for the links.#nav li.cat a {
text-decoration: none;
color: #e4deae;
border: none;
}#nav li.subcat a {
text-decoration: none;
color: #000;
border: none;
}Finally, establish color changes for hover states. Reuse that blue you used with the rest of the site.#nav li.subcat a:hover {
text-decoration:none;
color:#14b8b8;
}
#nav li.cat a:hover {
text-decoration:none;
color:#14b8b8;
}The final result should look like Figure 5 - 11.