Roland
08-09-2004, 22:56
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.
#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.