Using CSS
by Vivienne Trulock
Vertical Sub-Navigation Lists
You may want to extend your Vertical Navigation Lists by adding subsections to existing sections.
Set up List
First we need to set up a list of links so that some of the links are subsections of others. Using the list we created on the Vertical Navigation styles page, add in some subsections to products & services
The HTML code looks like this:
<ul class="samplelist">
<li><a href="index.htm">Home</a></li>
<li><a href="about.htm">About</a></li>
<li><a href="products.htm">Products</a>
<ul>
<li><a href="widgets.htm">Widgets</a></li>
<li><a href="bobbles.htm">Bobbles</a></li>
<li><a href="gringos.htm">Gringos</a></li>
</ul>
</li>
<li><a href="services.htm">Services</a>
<ul>
<li><a href="installation.htm">Installation</a></li>
<li><a href="maintenance.htm">Maintenance</a></li>
<li><a href="repairs.htm">Repairs</a></li>
</ul>
</li>
<li><a href="contact.htm">Contact</a></li>
</ul>
Position Sublist
You might notice that the subsection links are not in the correct position. To fix this we need to modify the style for lists inside lists. The 'ul ul' part says 'apply this style to ul tags inside other ul tags'
The CSS code for this in Internet Explorer is
ul ul{
margin-left: 0em;
}
See Firefox Hacks for details on adjusting the style for different browsers.
The list should now look like this:
Style Subnav links
It is a good idea to have a different style for your subnav links, to differentiate them from the higher level navigation links. To do this we must create a style that applies only to links within sublists, or <a> tags within <ul> tags with <ul> tags. Notice that we only have to include the changes we want to the original link style, as the rest of the style is inherited.
The CSS code for this is
background: #3399CC;
}
Adding hover, active and visited styles is achieved in a similar way.
The CSS code for this is
ul ul a:visited {
background: #257296;
}
ul ul a:active {
background: #FF9933;
}
ul ul a:hover {
background: #97CCE6;
}
The list should now look like this
Next we need to control the display of the subnavs, so that they are only on display on the correct pages, and that only one is on display at a time.
The instructions for this are available on the Menu System page. However, if you have not used class styles before you should read through the Class Styles and Invisible Styles section before proceeding.
