necesariamente tienes que utilizar algo de javascript para poder eso, solo con css no se puede, tienes que combinar ambas, te paso algo que se con el editor dreamweaver pero que si funciona y espero que sea lo quieres, copialo y pegalo en tu editor tal cual, y asegurate de tener javascript habiliatado
Código lenguaje:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mostrar ocultar capas</title>
<script type="text/javascript">
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
<style type="text/css">
#contenedor{ width:800px; height:300px; border:1px solid #333; position:relative}
#menu{width:300px; height:300px; border:1px solid #333; float:left;}
#cont1{ width:490px; height:300px; float:left; position:absolute; visibility:visible; margin:0 0 0 302px;}
#cont2{ width:490px; height:300px; float:left; position:absolute; visibility:hidden; margin:0 0 0 302px;}
#cont3{ width:490px; height:300px; float:left; position:absolute; visibility:hidden; margin:0 0 0 302px;}
</style>
</head>
<body onload="MM_showHideLayers('cont1','','show','cont2','','hide','cont3','','hide');">
<div id="contenedor">
<div id="menu">
<ul>
<li><a href="#" onclick="MM_showHideLayers('cont1','','show','cont2','','hide','cont3','','hide');">contenido 1</a></li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hide','cont2','','show','cont3','','hide');">contenido 2</a></li>
<li><a href="#"onclick="MM_showHideLayers('cont1','','hide','cont2','','hide','cont3','','show');">contenido 3</a></li>
</ul>
</div>
<div id="cont1">
Contenido 1
</div>
<div id="cont2">
Contenido 2
</div>
<div id="cont3">
Contenido 3
</div>
</div>
</body>
</html>
espero te sirva, como te digo el javascript que ves ahí te lo da dreamweaver y con lo demás tienes que jugar
Bienvenido a
FDW