Hola a todos es mi primer mensaje y espero me puedan ayudar. Estoy programando un menú desplegable en CSS y me gustaría que los submenús fueran casillas de verificación como en los formularios, de tal manera que el usuario, clicke en el menú 1 y elija dentro del submenú 1 las opciones que prefiera. A decir verdad, he empezado a usar CSS hace 2 días literalmente y aún no lo controlo. El menú lo saqué de este foro, y lo he adaptado, pero no consigo lo que os digo, que los submenús sean casillas de verificación y se puedan seleccionar tantas como el usuario quiera.
Este es el CSS:
@charset "utf-8";
/* CSS Document */
* { margin: 0px; padding: 0px; outline: 0; }
html, body { width: 100%; }
body { background: #fff; font-family: Verdana, Arial, Helvetica, sans-serif; }
#menu { text-align:center; font-size:0.8em; margin:0px; }
#menu ul li.nivel1 { width:160px; }
#menu ul li a, #menu ul li span {display: block; color: #FFF; background-color: #A90625; padding: 8px; position: relative; }
#menu ul li:hover span.nivel1 { cursor: pointer; background-color:#d82447; background-image:url(images/fondomenu.gif); }
#menu ul li ul { display: none; }
#menu ul li ul li a { width: 160px; padding: 6px 0px 8px 0px; border: none; border-top: none; background-color: #C33; font-weight: normal; }
#menu ul li ul li a:hover {position: relative; text-decoration: underline; color: #000; background-color: #D82447; }
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {display: block; position:relative; width:160px; border:none; border-top:none; }
#menu ul li:focus span { background-color:#D82447; }
Y este el html:
<body>
<div id="menu">
<ul>
<li class="nivel1" tabindex="1"><span class="nivel1">OPCION1</span>
<ul>
<li class="nivel1"><a>SUB1.1</a></li>
<li><a>SUB1.2</a></li>
<li><a>SUB1.3</a></li>
</ul>
</li>
<li class="nivel1" tabindex="2"><span class="nivel1">OPCION2</span>
<ul>
<li class="nivel1"><a>SUB1.1</a></li>
<li><a>SUB1.2</a></li>
<li><a>SUB1.3</a></li>
</ul>
</li>
<li class="nivel1" tabindex="3"><span class="nivel1">OPCION3</span>
<ul>
<li class="nivel1"><a>SUB1.1</a></li>
<li><a>SUB1.2</a></li>
<li><a>SUB1.3</a></li>
</ul>
</li>
</ul>
</div>
</body>
Gracias de antemano a todos y todas.