Hola a todos.
Llevo buscando una idea hace tiempo para esto, pero creo que hoy se me ha ocurrido. El punto es que no se com aplicarlo correctamente, ya que aún soy un usuario inicial en esto.
Lo que pasa es que tengo un foro que tiene categorías y en cada categorías los subforos, y el foro es tan grande, que cuesta encontrar la información.
Basándome en la idea del menú desplegable vertical con CSS, me gustaría hacer lo mismo para los foros.
El siguiente segmento de código corresponde a la siguiente captura, que representa una categoría con dos foros.
Código:
<div class="forabg">
<div class="inner"><span class="corners-top"><span></span></span>
<ul class="topiclist">
<li class="header">
<dl class="icon">
<dd class="dterm">
<div class="table-title">
<h2>Relaciones Exteriores de la Confederación</h2>
</div>
</dd>
<dd class="topics">Argumentos</dd>
<dd class="posts">Mensajes</dd>
<dd class="lastpost"><span>Últimos Mensajes</span></dd>
</dl>
</li>
</ul>
<ul class="topiclist forums">
<li class="row">
<dl class="icon" style="background-image: url(../hitskin.com/themes/11/31/75/i_folder_big.png); background-position: 10px 50%;">
<dd class="dterm">
<div style="display: block; margin : 0 0px 0 45px;">
<h3 class="hierarchy"><a href="halo-embajada-f3/index.html" class="forumtitle">Halo
Embajada</a></h3>
<br />
<p></p>
<table VALIGN="middle">
<tr>
<td><a href="halo-embajada-f3/index.html"><img src="../img522.imageshack.us/img522/1926/cascohalocopy2vr7.png" border="0" alt="" /></a></td>
<td><strong>Bienvenidos a la Alianza
Halo, si tienes algún pacto que proponernos,
indícalo aquí.</strong></td>
<tr>
</table>
<br />
<strong></strong> </div>
</dd>
<dd class="topics">3 <dfn>Argumentos</dfn></dd>
<dd class="posts">10 <dfn>Mensajes</dfn></dd>
<dd class="lastpost"><span><a href="halo-embajada-f3/halo-t6.htm#14" title="Halo">Halo</a><br />
Sáb Nov 22, 2008 8:45 pm<br />
<strong><a href="login66b0.html?mode=viewprofile&u=5" class="gensmall" rel="nofollow">Rapaig</a></strong><a href="halo-embajada-f3/halo-t6.htm#14" class="last-post-icon"><img src="../hitskin.com/themes/11/31/75/i_icon_latest_reply.gif" alt="Ver el último mensaje" title="Ver el último mensaje" /></a></span></dd>
</dl>
</li>
<li class="row">
<dl class="icon" style="background-image: url(../hitskin.com/themes/11/31/75/i_folder_big.png); background-position: 10px 50%;">
<dd class="dterm">
<div style="display: block; margin : 0 0px 0 45px;">
<h3 class="hierarchy"><a href="embajada-de-la-republica-de-jedis-y-siths-ojs-f4/index.html" class="forumtitle">Embajada
de la República de Jedis y Siths (O.J.S)</a></h3>
<br />
<p></p>
<table VALIGN="middle">
<tr>
<td><a href="embajada-de-la-republica-de-jedis-y-siths-ojs-f4/index.html"><img src="../img88.imageshack.us/img88/6360/luke70bt7.png" border="0" alt="" /></a></td>
<td><strong>Bienvenidos a la Alianza
O.J.S, si tienes algún Pacto o Sugerencia,
éste es el lugar a expresarlo.</strong></td>
<tr>
</table>
<br />
<strong></strong> </div>
</dd>
<dd class="topics">0 <dfn>Argumentos</dfn></dd>
<dd class="posts">0 <dfn>Mensajes</dfn></dd>
<dd class="lastpost"></dd>
</dl>
</li>
</ul>
<span class="corners-bottom"><span></span></span></div>
El código CSS que estoy ocupando:
Código:
/*Foros desplegables*/
ul.topiclist forums
{
list-style:none;
}
ul.topiclist forums, dd.dterm
{
display:none;
list-style:none;
}
ul.topiclist li:hover > dl, dd
{
display:block;
}
Traté de aplicar el CSS, tal cual (y las variaciones que he hecho), me presenta lo siguiente.
Ahora lo que me gustaría es que mostrara, por lo menos el nombre de la categoría y luego al pasar por la categoría se desplegara todo el contenido de la categoría.
Que se viera en este caso : "Relaciones Exteriores de la Confederación"
Saludos
Iván