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:


#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’s what we’ve been building.</span></a></li>
		<li><a href="#">Sposors<span>We couldn’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.

You should be able to just position a div there and when the hover comes up, it should be “on top” of what’s normally there.

Wow, that was easier than I thought. Thanks!