Tenho um menu feito com listas 'ul' com exibição de um sub-menu ao clicar no "checkbox" O elemento está muito distante e a referencia utilizando o "checkbox" está bem no incio, não sei bem como especificar o endereço #sm2, para poder exibir o sub menu ao clicar no checkbox, pois eu não queria inserir o checkbox em cima do terceiro "home" deixei uma /observação/ no CSS onde eu fiz a especificação que não da certo
.menu{ width:100%; height:48px; background-color:#000; font-family:Arial, Helvetica, sans-serif;
}
.menu ul{ list-style:none; position:relative;
}
.menu ul li{ width:150px; float:left;
}
.menu a{ padding:15px; color:#000; display:block; background-color:#F00; font-family:Arial, Helvetica, sans-serif; text-align:center; text-decoration:none;
}
.menu ul ul{ position:absolute; visibility: hidden;
}
.menu ul li:hover ul{ visibility:;
}
.menu a:hover{ background-color:#FFF;
}
.menu ul ul li{ float:none;
}
.menu ul ul li a{ border-bottom:1px solid #999; background-color:#CCC;
}
.menu #mv{ position:absolute; left:150px; top:49px;
}
.rd:checked ~ li ul#sm{ visibility:visible;}
/*Observação!*/
.rd2:checked ~ li ul ul ul #sm2{ visibility:visible;}
.rd2:checked ~ li ul#sm{ visibility:hidden;
}
<body bgcolor="#33CC99">
<nav class="menu">
<ul>
<input type="checkbox" name="tb" class="rd" id="t1"/>
<input type="checkbox" name="tb" class="rd2" id="t2"/>
<li><a href="javascriptvoid:(0)">Home</a>
<ul id="sm">
<li><a href="javascriptvoid:(0)">Serviços</a></li>
<li><a href="javascriptvoid:(0)">Serviços</a>
<ul id="mv">
<li><a href="javascriptvoid:(0)" >Contatos</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascriptvoid:(0)">Home</a></li>
<li><a href="javascriptvoid:(0)">Home</a>
<ul id="sm2">
<li><a href="javascriptvoid:(0)" >Aulas</a></li>
<li><a href="javascriptvoid:(0)" >Aulas</a></li>
</ul>
</li>
</ul>
</nav>
</body>