I have been reading Don Cederholm's 2nd edition of Bulletproof Web Design and find it incredibly useful. It just so happened I am re-designing a not for profit group web site, supporting sports for my children's school district; and the color scheme is a blue/yellow.

The sample tabbed interface he demonstrated in his book is perfect for my current situation with two twists:

1. I am floating the tabs to the right (and hope to lift them into the blue header, so the secondary tabs may display in the yellow/orange strip currently populated by the primary tabs); and

p.s.
Ever notice when flipping from left to right float with an unordered list, the list items display in reverse order? In the past, I have just re-ordered my list in the mark-up, so it renders "backwards"; however, is there a more sensible way to resolve this issue?


2. For each primary tab, I plan to transfer the visitor to the main page for the tab with secondary tab-like options displayed beneath the chosen primary tab.

I hope I explained my intentions well enough verbally, and I will include markup and css, as well. My problem is occurring on IE6 and Firefox on WinXP.

My initial issue is how to re-collapse (horizontally) the primary tabs when I open a sub-list with secondary selections below the primary list. With my current markup and css, selecting a primary tab slides the horizontal tabs "open" and displays the secondary options below the open area. How do I collapse this for a clean display of secondary options?

I will address the second issue (of moving the navigation up into the blue area of the "pageHeader" container) after I can successfully collapse the primary tabbed list.

Thank you in advance for your recommendations.

Code for "Sports" page: (kisd_sports.html)
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Keller Athletic Boosters Association Supports Keller Texas Independent School District Sports</title>

<link href="styles/boosters.css" rel="stylesheet" type="text/css" />
<link href="styles/boosters_subNav.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<script defer type="text/javascript" src="scripts/pngfix.js"></script>
<![endif]-->
</head>

<body id="pgSport">
<!-- Defining an outer page container provides for another level of detail within the body of page    -->
<div id="pageContainer">

<!-- The page header will include any logo, banner visuals (if any) and primary page navigation        -->
    <div id="pageHeader">

        <img src="images/KSpear.png" alt="Keller Athletic Boosters Association Logo (Fear the Spear)" width="152" height="157" />
        <address>
            Keller Athletic Boosters<br />
            P.O. Box 273<br />
            Keller, TX  76248<br />
            <a href="mailto:info@kellerathleticboosters.org?subject=Keller Athletic Boosters Web site inquiry"><img src="images/email.gif" class="iconInline" />Info at Keller Athletic Boosters.org</a>
        </address>
    
<!-- The page navigation structure is composed of a series of nested lists, whose presentation will
     be styled via css and behaviors defined by a combination of css and/or javascript libraries    -->
        <ul id="pageNavigation">
            <li id="tabHome"><a href="index.html">Home</a></li>
            <li id="tabMember"><a href="membership.html">Membership</a></li>
            <li id="tabSchool"><a href="keller_schools.html">Keller ISD</a></li>
            <li id="tabSport"><a href="kisd_sports.html">Sports</a>
            <ul id="subNavigation">
                <li><a href="kisd_basketball.html">Basketball</a></li>
                <li><a href="kisd_baseball.html">Baseball</a></li>
                <li><a href="kisd_football.html">Football</a></li>
                <li><a href="kisd_soccer.html">Soccer</a></li>
                <li><a href="kisd_softball.html">Softball</a></li>
                <li><a href="kisd_swimming.html">Swimming</a></li>
                <li><a href="kisd_track.html">Track</a></li>
                <li><a href="kisd_wrestling.html">Wrestling</a></li>
            </ul>
            </li>
            <li id="tabMerch"><a href=kisd_merchandise.html>Merchandise</a></li>
        </ul>        <!-- End of "pageNavigation" unordered list structure -->
        
    </div>            <!-- End of "pageHeader" container -->
    
    <div id="pageContent">
        <h1>Keller ISD Sports</h1>
        <p>Keller ISD primary focus on sports is visible by visiting the <a href="http://campus.kellerisd.net/swim/" target="_self">Keller Natatorium</a>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus.</p>
        <h2>Waterpolo</h2>
        <p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit.</p>
        <h2>Swimming</h2>
        <p>In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p> 
    </div>
    
    <div id="pageFooter">    
        <p class="copyrights">Web Design by <a href="http://www.wynnefields.com/" target="_blank">Wynnefields Creative</a>. Copyright &copy;2007 Keller Athletic Boosters Association. All Rights Reserved.</p>
  </div>
    
</div>

</body>
</html>
CSS Primary: (boosters.css)
Code:
/* Clear all browser versions default margins and padding which may cause inaccurate rendering    */
* {
    margin: 0;
    padding: 0;
}

/* Redefine markup tags margin, padding and relative to the base font defined in the body tag    */
body {
    font-size: small;
    color: #000;
    background-color: #ff9;
}
h1, h2, h3, h4 {
    font-family: "Lucida Grande", sans-serif;
}
h1 {
    margin-top: 1.8em;
    margin-bottom:    0.9em;
    font-size: 180%;
}
h2 {
    margin-top: 1.6em;
    margin-bottom: 0.8em;
    font-size: 160%;
}
h3 {
    margin-top: 1.4em;
    margin-bottom:    0.7em;
    font-size: 140%;
}
h4 {
    margin-top: 1.2em;
    margin-bottom: 0.6em;
    font-size: 120%;
}
p {
    margin: 0.2em 2.0em;
    padding: 0;
}

/* Default link styles for visual asthetics and KISD color theme                                */
a:link {
    color: #ccf;
    text-decoration: underline;
}
a:visited {
    color: #ffcb2d;
    text-decoration: none;
}
a:hover, a:active {
    color: #99f;
    text-decoration: none;
}

/* Layer styles are based on positioning on the page, visual requirements and funtionality        */
#pageContainer {
    margin: 10px auto;
    padding: 0;
    width: 760px;
    background-color: #fff;
}
#pageHeader {
    margin: 0;
    padding: 0;
    background-color: #00f;
}
#pageHeader address {
    margin-top: -144px;
    margin-right: 10px;
    font-weight: bold;
    color: #ffcb2d;
    text-align: right;
    float: right;
}
#pageNavigation {
    margin: 0;
    padding: 1px 0 0 0;    /* right float padding */
/*    padding: 10px 0 0 60px;    left float padding */
    list-style: none;
    width: 760px;
/*    width: 700px;            left float width (subtracting margin + padding) */
    background: #ffcb2d url(../images/nav_bg.gif) repeat-x bottom;
    float: right;
}
#pageNavigation li {
    margin: 0 0 0 1px;    /* right float margins */
/*    margin: 0 1px 0 0;    left float margins */
    padding: 0;
    font-family: "Lucida Grande", sans-serif;
    font-size: 80%;
    float: right;
}
#pageNavigation a {
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
    color: #009;
    display: block;
    border: 1px solid #9b8748;
    border-bottom: none;
    background: #f9e9a9 url(../images/nav_off.gif) repeat-x top left;
    float: left;
}
#pageNavigation a:hover,
body#pgHome #tabHome a,
body#pgMember #tabMember a,
body#pgSchool #tabSchool a,
body#pgSport #tabSport a,
body#pgMerch #tabMerch a {
    color: #009;
    padding-bottom: 5px;
    border-color: #727377;
    background: #fff url(../images/nav_bg.gif) repeat-x top left;
}
CSS Secondary: (boosters_subNav.css)
Code:
#subNavigation {
    margin: 0; 
    padding: 24px 0 0 0;    /* right float padding */
    list-style: none;
    float: left;
}
#subNavigation li {
    margin: 0 0 0 1px;    /* right float margins */
/*    margin: 0 1px 0 0;    left float margins */
    padding: 0;
    font-family: "Lucida Grande", sans-serif;
    font-size: 90%;
    float: left;
}
#subNavigation a {
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
    color: #009;
    display: block;
    border: 1px solid #9b8748;
    background: #f9e9a9 url(../images/nav_off.gif) repeat-x top left;
    float: left;
}
To see sample in browser, please visit the site in my signature and after the ".com/" enter "kab/" and press enter. The index page should appear, so you can see all tabs across the header and also see what I mean by "blue area of header".

Again, thank you in advance for any help. I was hoping to get my friend his mockups for a board meeting tomorrow evening.