Chief Delphi - Help me make a big ugly CSS hack!

I'm working on building a site for my new team, and I'm using Eric Meyer's pure CSS popups to put a line of text under the navigation links as you roll over them:

Code:

#sections {

        height: 40px;

        font-size: 30px;

        position: relative;

        margin-bottom: 18px;

}



#sections ul {

        margin: 0;

        padding: 0;

}



#sections li {

        display: table-cell;

        height: 40px;

        margin: 0px;

        padding: 0px 5px;

}



#sections a span {

        display: none;

}



#sections a {

        display: block;

        margin: 0;

        width: 100%;

        height: 100%;

}



#sections a:hover span {

        position: absolute;

        display: block;

        left: 0px;

        top: 41px;

        font-size: 14px;

        padding-left: 2px;

}



<div id="sections">

        <ul>

                <li><a href="#">Background<span>What is FIRST? Who are we? What have we done?</span></a></li>

                <li><a href="#">Photos<span>Extensive photo galleries of our team in action, on and off the field.</span></a></li>

                <li><a href="#">Robots<span>Here&rsquo;s what we&rsquo;ve been building.</span></a></li>

                <li><a href="#">Sposors<span>We couldn&rsquo;t exist without these companies and organizations.</span></a></li>

                <li><a href="#">Section!<span>This site needs more sections!</span></a></li>

        </ul>

</div>

This works as I expect it to so far. Now we get to the interesting part: how do I put something in the space the popup would go in but only have it display when none of the links are rolled over? Any ideas? Thanks.