Help me make a big ugly CSS hack!

[Roland]

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:

#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.