Using CSS for Tabbed Browsing

Hi everyone,

I have been trying to implement some css tabbed navigation and can’t quite get it working. What I want is content that is displayed based on which tab I click (I guess that’s what tabbed browsing is right ? ) and I don’t want to have to load a new page. Can this be done with css?

So far, this is my mark up. As you can see I’m trying to apply the style in the #ubuntuMenu li a:focus+ul section to the currently selected content. I’ve tried a few other pseudo classes with and without the sibling “+”. Still no luck.

Any ideas on how I could work this one?

Thanks

CSS

[code]
#ubuntuMenu li
{
float: right;
display: block;
margin-left: 1em;
}

#ubuntuMenu ul
{
display: none;
}

#ubuntuMenu li a:focus+ul
{
display: block;
position: absolute;
left: 0px;
margin-right: 10px;
}
[/code]

HTML

[code]
<ul id=”ubuntuMenu”>
<li>
<a title=”View the top 5 videos” href=”#ubuntuTop5″>top 5</a>
<ul id=”ubuntuTop5″>
<li>
<h3>Clean Install of Hardy Heron</h3>
<p>This is a snippet of text on this topic</p>
</li>
</ul>
</li>
<li>latest</li>
<li>versions</li>
</ul>
[/code]

Also in #CSS _↴