Tema: menu y submenu al mismo nivel
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 18/09/2013, 09:37
bathorz
 
Fecha de Ingreso: agosto-2013
Mensajes: 150
Antigüedad: 10 años, 8 meses
Puntos: 29
Respuesta: menu y submenu al mismo nivel
Juega las posiciones y los anchos. Al CSS se puede mejorar la herencia, investiga.
Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3.    <head>
  4.       <meta charset="utf-8" />
  5.       <title>Menu_nivel</title>
  6.       <style type="text/css">
  7.          * { margin: 0px;padding: 0px; outline: 0;}
  8.          .menu ul {
  9.             list-style-type: none;
  10.          }
  11.          /* n1 */
  12.          .menu ul li.n1 {width: 50px; border: solid 1px #f00;}
  13.          .menu ul li a { color:black; text-decoration: none;}
  14.          .menu ul li a.n1 {color:red; display: block!important;display: none;position: relative;}
  15.          /* se oculta ul */
  16.          .menu ul li ul {display: none;}
  17.          /* muestra nivel 2 */
  18.          .menu ul li:hover > ul {display: block;position: absolute;left: 52px;top:-1px;}
  19.          /* n2 */
  20.          .menu ul li ul li a.n2 {width: 50px; color:green; border: solid 1px #0f0;display: block!important;display: none;position: relative;}
  21.          /* muestra nivel 3 */
  22.          .menu ul li ul li:hover > ul {display: block;position: absolute;left: 52px;top:-1px;}
  23.          /* n3 */
  24.          .menu ul li ul li ul li a.n3 {width: 50px;color:blue;border: solid 1px #00f;display: block!important;display: none;position: relative;}
  25.       </style>
  26.    </head>
  27.    <body>
  28.       <div  class="menu">
  29.          <ul>
  30.             <li class="n1">
  31.                <a class="n1" href="">1</a>
  32.                <ul>
  33.                   <li>
  34.                      <a class="n2" href="">11a</a>
  35.                      <ul>
  36.                         <li>
  37.                            <a class="n3" href="">111</a>
  38.                         </li>
  39.                      </ul>
  40.                   </li>
  41.                   <li>
  42.                      <a class="n2" href="">11b</a>
  43.                   </li>
  44.                   <li>
  45.                      <a class="n2" href="">111</a>
  46.                   </li>
  47.                </ul>
  48.             </li>
  49.             <li class="n1">
  50.                <a class="n1" href="">2</a>
  51.                <ul>
  52.                   <li>
  53.                      <a class="n2" href="">22a</a>
  54.                   </li>
  55.                   <li>
  56.                      <a class="n2" href="">22b</a>
  57.                      <ul>
  58.                         <li>
  59.                            <a class="n3" href="">222a</a>
  60.                         </li>
  61.                         <li>
  62.                            <a class="n3" href="">222b</a>
  63.                         </li>
  64.                      </ul>
  65.                   </li>
  66.                   <li>
  67.                      <a class="n2" href="">22c</a>
  68.                   </li>
  69.                </ul>
  70.             </li>
  71.          </ul>
  72.       </div>
  73.    </div>
  74. </body>
  75. </html>