Professional CodeIgniter, Thomas Myer
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 .
c05.indd 136
c05.indd 136
6/10/08 5:35:25 PM
6/10/08 5:35:25 PM