There may be times when you want to open a side navigation list out, to show subsections within a section. The most semantically correct way to achieve this is by using nested lists.
CSS CODE
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
}
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}
#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 9em;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}
HTML CODE
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
<ul>
<li><a href="#">Goat</a></li>
<li><a href="#">Cow</a></li>
</ul>
</li>
<li><a href="#">Eggs</a>
<ul>
<li><a href="#">Free-range</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">Cheese</a>
<ul>
<li><a href="#">Smelly</a></li>
<li><a href="#">Extra smelly</a></li>
</ul>
</li>
</ul>
</div>
Start with a basic unordered list. The list items are all active (wrapped in <a href="#"> </a>) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element. For this example a "#" is used as a dummy link. Keep in mind that a nested list should go between the <li> and </li> tags to be valid HTML.
To remove the HTML list bullets, set the "list-style-type" to "none".
#navcontainer ul { list-style-type: none; }
Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.
To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".
margin: 0;
padding: 0;
To achieve a rollover, the list items have to be converted to blocks using "display: block".
#navcontainer a { display: block; }
To add a background color, you set it within the "a" state. A color is also added to make the text readable.
color: #FFF;
background-color: #036;
Set the list width within a rule targeting the "a" element so the entire block will be active.
width: 9em;
Add padding to the list items within the "a" state.
padding: 3px 12px 3px 8px;
At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.
text-decoration: none;
Use "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.
#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}
The list items can now be separated so that they are easier to distinguish. Separating nested list items using margins is not recommended as it is not stable across browsers. A safer method is to use borders such as "border-bottom: 1px solid #fff".
For Opera, it is important to set the LI margins to "0" to avoid gaps. This is done using the following rule "#navcontainer li { margin: 0; }".
The basic list is now complete, but there is still no difference between main sections and sub-sections.
#navcontainer li { margin: 0; }
border-bottom: 1px solid #fff;
The first step to setting rules for the nested list is to duplicate the main list rules for "#navcontainer a". We then need to isolate the nested items to change their appearance. If we take our duplicated rule set and simply change the selector to "#navcontainer li li a", it will now target only the nested list items. We now need to change the appearance of this rule set.
#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #036;
width: 9em;
padding: 3px 12px 3px 8px;
text-decoration: none;
border-bottom: 1px solid #fff;
}
Within the rule set "#navcontainer li li a" the background color is changed to distinguish it from the main list items.
background-color: #69C;
One way to help show that the nested list items are inside the main sections is to indent them. This can be done by changing the padding from "3px 12px 3px 8px" to "3px 3px 3px 17px". This is shorthand for "top: 3px", "right: 3px", "bottom: 3px" and "left: 17px" - the units start at the top and go clockwise.
For this model to work, you must keep the padding used on the nested lists to the same total as the main list items. The main list items use "right: 12px", "left: 8px;", so the nested list padding for left and right must add up to 20px.
padding: 3px 3px 3px 17px;
To finish off, you can make the main list items "bold" and the nested list items "normal". Keep in mind that you must specify "normal" for the nested lists, otherwise the "bold" will cascade down and they will become "bold" too.