Figure 7-10. Menus expanded with CSS

Chapter 7 - CSS Optimization

Figure 7-10. Menus expanded with CSS

The submenus default to hidden, and we auto-deploy the submenu of the page you are on with a simple declaration of visibility. Let's look at how this is done. First, we set up our menus:

<div id="left">
<h3>PRODUCTS: Programs</h3>
<ul class="leftmenu">
    <li><a href="#">Strategic Business and Design</a></li>
</ul>
<ul class="sub one">
    <li> <a href="#">Organizational Future by Design</a>™</li>
    <li> <a href="#">Strategic Planning For Action™</a></li>
    <li> <a href="#">Mergers and Reorganizations</a></li>
</ul>

<ul class="leftmenu">
    <li><a href="#">Executive Leadership </a></li>
</ul>
<ul class="sub three">...

Next, we set up our menus with standard CSS markup, and hide all of the submenus:

<style type="text/css">
    .sub a:link {
    color: #666;
    text-decoration: none;
}
.sub a:visited {
    color: #666;
    text-decoration: none;
}
.sub a:hover {
    color: #000;
    text-decoration: none;
    border-bottom:1px solid #ff3;
}
.sub {
    display: none;
}
</style>

Note that you can further optimize these styles using grouping, like so:

<style type="text/css">
    .sub a:link, .sub a:visited {
    color:#666;
}
.sub a:hover {
    color:#000;
    border-bottom:1px solid #ff3;
}
.sub a:link, .sub a:visited, .sub a:hover {
    text-decoration:none;
}
.sub {
    display:none;
}
</style>

Then, to display the appropriate submenu, we use a second class (one, two, three, four...; ideally these would be class names related to the topic of the page instead in case the order changes) to set the display property of the menu. So, when you click on the Executive Leadership menu and go to the Executive Leadership page, we include this brief CSS snippet in the page (to make it easier for the client to understand and change):

<style type="text/css">
    .three {
    display: list-item;
}
</style>