Hey

Okay so i'm kind of new to css and what i'm trying to do is create a navigation link of 5 items and upon clicking each link, the previous contents will be hidden and the new content for that link will be displayed.

I tried using a few sites I found but it didn't work.

http://stylizedweb.com/2008/09/10/si...hide-with-css/
(this one really doesn't work.

http://www.willmaster.com/blog/css/s...-div-layer.php
(this one gave me a mozilla firefox error saying it can't support javascript yet ive used javascript in a lot of places)


Can somebody please help or at least tell me where i'm going wrong. I've been trying to figure this out for awhile and have had no avail.


Here's my code so far:
Code:
   <ul id="menu">
	                      
					             <li id="who"><a href="#" id="who"><span></span>Who</a></li>
					             <li id="what"><a href="#" id="what"/><span></span>What</a></li>   
                       <li id="team"><a href="#" id="team"><span></span>Team</a></li>
					             <li id="beliefs"><a href="#" id="beliefs"><span></span>beliefs</a></li>
					             <li id="partners"><a href="#" id="partners"><span></span>partners</a></li>
					             <li id="news"><a href="#" id="news"><span></span>news</a></li>
                  					             				             
				          </ul>
#menu span
{
display:block;
position:absolute;
}

#menu a:hover span
{
display:block;
}

#who span
{
height:11px;
width:11px;
left:35px;
top: -20px;
}

# what span
{
height:11px;
width:11px;
left:35px;
top: -10px;
}

Code: