Hacer un nivel mas en este menu vertical

neodani · #1 (**permalink**) 03/06/2010, 05:05

Buenas,

Me gustaría poder hacer un nivel más en este menú vertical, pero no he sido capaz, podéis ayudarme?

Código PHP:

Ver original<xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en-us">
<head>
    <title>DL Demo</title>
    <script src="http://jquery.com/src/jquery.js"></script>
    <script>
    $(document).ready(function(){
        $("dd:not(:first)").hide();
        $("dt a").click(function(){
            $("dd:visible").slideUp("fast");
            $(this).parent().next().slideDown("fast");
            return false;
        });
    });
    </script>
    <style>
    body { font-family: Arial; font-size: 16px; }
    dl { width: 200px; }
    dl,dd { margin: 0; }
    dt { background: #9CCEEF; font-size: 18px; padding: 5px; margin: 2px; }
    dt a { color: #FFF; }
    dd a { color: #000; }
    ul { list-style: none; padding: 5px; }
    a{text-decoration:none}
    </style>
</head>
 
<body>
<dl>
    <dt><a href="/">España</a></dt>
    <dd>
    <ul>
        <li><a href="#">Primera División</a></li>
        <li><a href="#">Segunda División</a></li>
        <li><a href="#">Copa del Rey</a></li>
    </ul>
    </dd>
    <dt><a href="/discuss/">Italia</a></dt>
    <dd>
    <ul>
        <li><a href="#">Primera División</a></li>
        <li><a href="#">Segunda División</a></li>
        <li><a href="#">Copa del Rey</a></li>
    </ul>
    </dd>
    <dt><a href="/dev/">Francia</a></dt>
    <dd>
    <ul>
        <li><a href="#">Primera División</a></li>
        <li><a href="#">Segunda División</a></li>
        <li><a href="#">Copa del Rey</a></li>
    </ul>
    </dd>
</dl>
</body>
</html>

Probé diferentes manera, una de ellas así, pero no da el resultado esperado...

Código HTML:

Ver original<dt><a href="/">España</a></dt>
    <dd>
    <ul>
        <li><dt><a href="/">Primera División</a></dt>
    <dd>
    <ul>
        <li><a href="#">Próximos partidos</a></li>
        <li><a href="#">Clasificacion</a></li>
    </ul>
    </dd></li>
        <li><a href="#">Segunda División</a></li>
        <li><a href="#">Copa del Rey</a></li>
    </ul>
    </dd>

¿Cómo se podría hacer?

Muchas gracias de antemano!

neodani · #2 (**permalink**) 05/06/2010, 15:55

Encontré una alternativa para conseguir el efecto deseado, efecto accordeon de varios niveles, por si alguien le sirve...

http://www.forosdelweb.com/f127/ayud...pulsar-813362/

Saludos!