Tema: Hacer un nivel mas en este menu vertical
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 03/06/2010, 05:05
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 9 meses
Puntos: 20
Hacer un nivel mas en este menu vertical
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
  1. <xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
  5. <head>
  6.     <title>DL Demo</title>
  7.     <script src="http://jquery.com/src/jquery.js"></script>
  8.     <script>
  9.     $(document).ready(function(){
  10.         $("dd:not(:first)").hide();
  11.         $("dt a").click(function(){
  12.             $("dd:visible").slideUp("fast");
  13.             $(this).parent().next().slideDown("fast");
  14.             return false;
  15.         });
  16.     });
  17.     </script>
  18.     <style>
  19.     body { font-family: Arial; font-size: 16px; }
  20.     dl { width: 200px; }
  21.     dl,dd { margin: 0; }
  22.     dt { background: #9CCEEF; font-size: 18px; padding: 5px; margin: 2px; }
  23.     dt a { color: #FFF; }
  24.     dd a { color: #000; }
  25.     ul { list-style: none; padding: 5px; }
  26.     a{text-decoration:none}
  27.     </style>
  28. </head>
  29.  
  30. <body>
  31. <dl>
  32.     <dt><a href="/">España</a></dt>
  33.     <dd>
  34.     <ul>
  35.         <li><a href="#">Primera División</a></li>
  36.         <li><a href="#">Segunda División</a></li>
  37.         <li><a href="#">Copa del Rey</a></li>
  38.     </ul>
  39.     </dd>
  40.     <dt><a href="/discuss/">Italia</a></dt>
  41.     <dd>
  42.     <ul>
  43.         <li><a href="#">Primera División</a></li>
  44.         <li><a href="#">Segunda División</a></li>
  45.         <li><a href="#">Copa del Rey</a></li>
  46.     </ul>
  47.     </dd>
  48.     <dt><a href="/dev/">Francia</a></dt>
  49.     <dd>
  50.     <ul>
  51.         <li><a href="#">Primera División</a></li>
  52.         <li><a href="#">Segunda División</a></li>
  53.         <li><a href="#">Copa del Rey</a></li>
  54.     </ul>
  55.     </dd>
  56. </dl>
  57. </body>
  58. </html>


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

Código HTML: 
Ver original
  1. <dt><a href="/">España</a></dt>
  2.     <dd>
  3.     <ul>
  4.         <li><dt><a href="/">Primera División</a></dt>
  5.     <dd>
  6.     <ul>
  7.         <li><a href="#">Próximos partidos</a></li>
  8.         <li><a href="#">Clasificacion</a></li>
  9.     </ul>
  10.     </dd></li>
  11.         <li><a href="#">Segunda División</a></li>
  12.         <li><a href="#">Copa del Rey</a></li>
  13.     </ul>
  14.     </dd>

¿Cómo se podría hacer?

Muchas gracias de antemano!