Ci ho pensato… L'unica scappatoia è far apparire le pseudoselect come se fossero multilinea. Così è accettabile:
codice:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Menu condizionati</title>
<style type="text/css">
div.clists {
position: relative;
left: -200px;
top: 0;
width: 100%;
height: 96px;
margin-top: 2px;
}
div.clists span {
display: block;
position: absolute;
left: 200px;
top: -2px;
display: block;
height: 28px;
line-height: 28px;
width: 200px;
}
div.clists ul {
display: block;
margin: 0;
padding: 0;
position: absolute;
left: 400px;
top: -2px;
width: auto;
height: 100%;
border: 2px #000000 solid;
}
div.clists li {
display: block;
list-style-type: none;
padding: 0;
margin: 0;
width: 150px;
}
div.clists label {
position: relative;
z-index: 5001;
cursor: pointer;
font-size: 14px;
background-color: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 24px;
line-height: 24px;
padding: 0 4px;
width: 100%;
}
div.clists input[type="radio"], div.clists input[type="radio"] ~ ul, div.clists input[type="radio"] ~ span {
display: none;
}
div.clists label, div.clists input[type="radio"]:checked ~ ul,
div.clists input[type="radio"]:checked ~ span, div.clists input[type="radio"]:checked ~ label {
display: block;
}
div.clists label:hover {
background-color: red;
}
div.clists input[type="radio"]:checked ~ label {
background-color: blue !important;
}
</style>
</head>
<body>
<h1>Menu a tendina condizionati</h1>
<form name="modulo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer in augue magna. Fusce a urna eros, ac ornare orci. Suspendisse eget nisi enim. Nam vitae diam justo, id scelerisque nunc. Cras id tincidunt risus. Nulla sit amet arcu sed ante tincidunt elementum. Integer vel orci justo. Quisque at molestie leo. Proin dignissim elit dignissim ligula ullamcorper mattis. Cras eu nulla nec tortor imperdiet vehicula. </p>
<div class="clists">
<span>Etichetta gruppo 1:</span>
<ul>
[*]
<input type="radio" name="gruppoA" value="1" id="clist-itemA1" /><label for="clist-itemA1">Opzione A1</label>
<span>Etichetta gruppo 2:</span>
<ul>
[*]
<input type="radio" name="gruppoB" value="1" id="clist-itemB1" /><label for="clist-itemB1">Opzione B1</label>
<span>Etichetta gruppo 3:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="1" id="clist-itemC1" /><label for="clist-itemC1">Opzione C1</label>
[*]<input type="radio" name="gruppoC" value="2" id="clist-itemC2" /><label for="clist-itemC2">Opzione C2</label>
[*]<input type="radio" name="gruppoC" value="3" id="clist-itemC3" /><label for="clist-itemC3">Opzione C3</label>
[/list]
[*]
<input type="radio" name="gruppoB" value="2" id="clist-itemB2" /><label for="clist-itemB2">Opzione B2</label>
<span>Etichetta gruppo 4:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="4" id="clist-itemC4" /><label for="clist-itemC4">Opzione C4</label>
[*]<input type="radio" name="gruppoC" value="5" id="clist-itemC5" /><label for="clist-itemC5">Opzione C5</label>
[*]<input type="radio" name="gruppoC" value="6" id="clist-itemC6" /><label for="clist-itemC6">Opzione C6</label>
[/list]
[*]
<input type="radio" name="gruppoB" value="3" id="clist-itemB3" /><label for="clist-itemB3">Opzione B3</label>
<span>Etichetta gruppo 5:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="7" id="clist-itemC7" /><label for="clist-itemC7">Opzione C7</label>
[*]<input type="radio" name="gruppoC" value="8" id="clist-itemC8" /><label for="clist-itemC8">Opzione C8</label>
[*]<input type="radio" name="gruppoC" value="9" id="clist-itemC9" /><label for="clist-itemC9">Opzione C9</label>
[*]<input type="radio" name="gruppoC" value="10" id="clist-itemC10" /><label for="clist-itemC10">Opzione C10</label>
[/list]
[/list]
[*]
<input type="radio" name="gruppoA" value="2" id="clist-itemA2" /><label for="clist-itemA2">Opzione A2</label>
<span>Etichetta gruppo 6:</span>
<ul>
[*]
<input type="radio" name="gruppoB" value="4" id="clist-itemB4" /><label for="clist-itemB4">Opzione B4</label>
<span>Etichetta gruppo 7:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="11" id="clist-itemC11" /><label for="clist-itemC11">Opzione C11</label>
[*]<input type="radio" name="gruppoC" value="12" id="clist-itemC12" /><label for="clist-itemC12">Opzione C12</label>
[*]<input type="radio" name="gruppoC" value="13" id="clist-itemC13" /><label for="clist-itemC13">Opzione C13</label>
[/list]
[*]
<input type="radio" name="gruppoB" value="5" id="clist-itemB5" /><label for="clist-itemB5">Opzione B5</label>
<span>Etichetta gruppo 8:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="14" id="clist-itemC14" /><label for="clist-itemC14">Opzione C14</label>
[*]<input type="radio" name="gruppoC" value="15" id="clist-itemC15" /><label for="clist-itemC15">Opzione C15</label>
[/list]
[/list]
[*]
<input type="radio" name="gruppoA" value="3" id="clist-itemA3" /><label for="clist-itemA3">Opzione A3</label>
<span>Etichetta gruppo 9:</span>
<ul>
[*]
<input type="radio" name="gruppoB" value="1" id="clist-itemB6" /><label for="clist-itemB6">Opzione B6</label>
<span>Etichetta gruppo 10:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="16" id="clist-itemC16" /><label for="clist-itemC16">Opzione C16</label>
[*]<input type="radio" name="gruppoC" value="17" id="clist-itemC17" /><label for="clist-itemC17">Opzione C17</label>
[*]<input type="radio" name="gruppoC" value="18" id="clist-itemC18" /><label for="clist-itemC18">Opzione C18</label>
[/list]
[*]
<input type="radio" name="gruppoB" value="7" id="clist-itemB7" /><label for="clist-itemB7">Opzione B7</label>
<span>Etichetta gruppo 11:</span>
<ul>
[*]<input type="radio" name="gruppoC" value="19" id="clist-itemC19" /><label for="clist-itemC19">Opzione C19</label>
[*]<input type="radio" name="gruppoC" value="20" id="clist-itemC20" /><label for="clist-itemC20">Opzione C20</label>
[*]<input type="radio" name="gruppoC" value="21" id="clist-itemC21" /><label for="clist-itemC21">Opzione C21</label>
[/list]
[/list]
[/list]
</div>
Vivamus eleifend dolor at mi lacinia rutrum. Cras euismod enim pellentesque leo blandit lobortis. Nunc semper, ipsum eu vulputate posuere, augue arcu eleifend elit, vitae fermentum nulla libero id ante. Nulla id rhoncus nisi. Curabitur malesuada, ipsum sit amet sagittis porta, odio massa bibendum neque, semper pellentesque tortor quam ac dolor.</p>
</form>
</body>
</html>