Working Example

• Your Text
• Your Text
• Your Text
• Your Text

HTML

<ul id="menu">
	<li>
		<a href="#"><span>Your Text</span></a>
	</li>
	
	<li>
		<a href="#"><span>Your Text</span></a>
	</li>
	
	<li>
		<a href="#"><span>Your Text</span></a>
	</li>
	
	<li>
		<a href="#"><span>Your Text</span></a>
	</li>
</ul>

CSS

	ul#menu {
		overflow: hidden;
		width: 960px;
		margin: 0 auto;
		padding: 0;
		height: 120px; /* make sure the height allows for the span text also otherwise will be hidden (overflow:hidden;)*/
	}
	ul#menu li {
		width: 100px; height: 100px;
		float: left; margin-right: 10px;
		background: #eee;
		list-style: none;
		position: relative; /*position relative allows spans to be positioned absolutely in relation to these li's */
	}
	ul#menu li a {
		width: 100px; height: 100px;
		display: block;
	}
	
	ul#menu li a:hover {
		background: #666;
	}
		
	ul#menu li a span {
		/*position span elements at the bottom of the li (just outside the box) */
		position: absolute;
		left: 0;
		top:100px;
		width:100px;
		text-align: center;
		display: none; /* hide the span by default */
	}
	
	ul#menu li a:hover span {
		display: block;  /* show the span on hover */
	}