API tools faq
paste
Advertisement
Chuso

Menú desplegable CSS con varias columnas

Chuso
Jun 19th, 2013
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Menús desplegables con columnas</title>
  6.   <style type="text/css">
  7.     /*
  8.      * Hay partes del estilo que son las que aportan la funcionalidad
  9.      * y otras que son meramente eso, estilo. Se deja a la habilidad
  10.      * del lector ser capaz de discernir unas de otras :-)
  11.      * Hay algunos detalles mejorables. Por ejemplo, no estoy muy
  12.      * orgulloso de usar display: table, es como hacer trampas para
  13.      * usar tablas sin usar etiquetas <table>, pero esto es solo una
  14.      * prueba de concepto rápida así que me he permitido pequeñas
  15.      * licencias como esa.
  16.      *
  17.      * salu2
  18.      * Chuso Pérez (@chusop)
  19.      * http://chuso.net
  20.      */
  21.     div.menu
  22.     {
  23.       display: table;
  24.     }
  25.     div.menu > ul
  26.     {
  27.       display: table-row;
  28.     }
  29.     div.menu ul
  30.     {
  31.       list-style: none;
  32.       padding: 0;
  33.     }
  34.     div.menu > ul > li
  35.     {
  36.       background-color: #ccc;
  37.       border: 1px solid #666;
  38.       cursor: pointer;
  39.       display: table-cell;
  40.       padding: 0.5em;
  41.     }
  42.     div.menu li:hover
  43.     {
  44.       background-color: #bbb;
  45.     }
  46.     div.menu > ul > li > div
  47.     {
  48.       background-color: #ccc;
  49.       display: none;
  50.       margin-left: -0.5em;
  51.       padding: 0.5em;
  52.       position: absolute;
  53.     }
  54.     div.menu > ul > li:hover > div
  55.     {
  56.       display: block;
  57.     }
  58.     div.menu > ul > li > div > ul
  59.     {
  60.       float: left;
  61.       padding: 1em;
  62.     }
  63.     div.menu > ul > li > div > ul > li:first-child
  64.     {
  65.       font-size: larger;
  66.       font-weight: bold;
  67.       text-decoration: underline;
  68.     }
  69.     div.menu > ul > li > div > ul > li:first-child:hover
  70.     {
  71.       background-color: #ccc;
  72.       cursor: default;
  73.     }
  74.   </style>
  75. </head>
  76. <body>
  77. <div class="menu">
  78.   <ul>
  79.     <li>
  80.       Menú 1
  81.       <div>
  82.         <ul>
  83.           <li>Columna 1.1</li>
  84.           <li>Opción 1.1.1</li>
  85.           <li>Opción 1.1.2</li>
  86.           <li>Opción 1.1.3</li>
  87.         </ul>
  88.         <ul>
  89.           <li>Columna 1.2</li>
  90.           <li>Opción 1.2.1</li>
  91.           <li>Opción 1.2.2</li>
  92.           <li>Opción 1.2.3</li>
  93.         </ul>
  94.         <ul>
  95.           <li>Columna 1.3</li>
  96.           <li>Opción 1.3.1</li>
  97.           <li>Opción 1.3.2</li>
  98.           <li>Opción 1.3.3</li>
  99.         </ul>
  100.       </div>
  101.     </li>
  102.     <li>
  103.       Menú 2
  104.       <div>
  105.         <ul>
  106.           <li>Columna 2.1</li>
  107.           <li>Opción 2.1.1</li>
  108.           <li>Opción 2.1.2</li>
  109.           <li>Opción 2.1.3</li>
  110.         </ul>
  111.         <ul>
  112.           <li>Columna 2.2</li>
  113.           <li>Opción 2.2.1</li>
  114.           <li>Opción 2.2.2</li>
  115.           <li>Opción 2.2.3</li>
  116.         </ul>
  117.         <ul>
  118.           <li>Columna 2.3</li>
  119.           <li>Opción 2.3.1</li>
  120.           <li>Opción 2.3.2</li>
  121.           <li>Opción 2.3.3</li>
  122.         </ul>
  123.       </div>
  124.     </li>
  125.     <li>
  126.       Menú 3
  127.       <div>
  128.         <ul>
  129.           <li>Columna 3.1</li>
  130.           <li>Opción 3.1.1</li>
  131.           <li>Opción 3.1.2</li>
  132.           <li>Opción 3.1.3</li>
  133.         </ul>
  134.         <ul>
  135.           <li>Columna 3.2</li>
  136.           <li>Opción 3.2.1</li>
  137.           <li>Opción 3.2.2</li>
  138.           <li>Opción 3.2.3</li>
  139.         </ul>
  140.         <ul>
  141.           <li>Columna 3.3</li>
  142.           <li>Opción 3.3.1</li>
  143.           <li>Opción 3.3.2</li>
  144.           <li>Opción 3.3.3</li>
  145.         </ul>
  146.       </div>
  147.     </li>
  148.   </ul>
  149. </div>
  150. </body>
  151. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!