1

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>

1 Resposta 1

0

Cara vc pode "encurtar" esse caminho simplesmente colocando uma classe na <li> que vc quer mostrar. Assim seu regra no CSS ficaria assim: .rd2:checked ~ li.teste ul#sm2{ }. Repare com com a classe .teste vc não precisa fica colocando li li li ul#sm2

.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;
}

#sm, #sm2 { visibility:hidden;}

.rd:checked ~ li ul#sm{ visibility:visible;}
/*.rd:checked ~  li.teste ul#sm2{ visibility:hidden;} se vc deixar isso seu menu bugga */

/*Observação!*/
.rd2:checked ~  li.teste ul#sm2{ visibility:visible;}

/*.rd2:checked ~ li ul#sm{ visibility:hidden;} se vc deixar isso seu menu bugga*/
<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)">Home1</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)">Home2</a></li>
    <li class="teste"><a href="javascriptvoid:(0)">Home3</a>
    <ul id="sm2">
        <li><a href="javascriptvoid:(0)" >Aulas</a></li>
        <li><a href="javascriptvoid:(0)" >Aulas</a></li>
    </ul>
    </li>
    </ul>
</nav>

OBS: Cara dessa forma que vc fez parece que sua intenção era quando marcar um também desmarcar o outro confere? Se for isso mesmo só com CSS vc não vai conseguir resolver, pq mesmo vc colocando ele como invisível o botão continua com status de checked entende, ai quando vc clica de novo pra checar na verdade ele já está checado, só não está visível na tela. Meio complicado né, mas o fato é que não vai dar certo dessa forma se a sua intenção é só marcar um por vez, ou desmarcar um quando clicar no outro.

2
  • kkkkkkkk acabei de fazer o teste aqui kkk e vc está certo! realmente não deu certo, nessas horas da um depre kk, seu exemplo de colocar um endereço "class" deu certo, eu agradeço! nem pensei nisso na hora que estava fazendo o menu, poxa vida... mas o importante é o conhecimento dos erros 23/05/2018 às 0:41
  • @ElienayJunior tem horas que a gente só percebe o erro quando chega nele. Mas com o tempo vc vai ver os erros de longe e já vai saber adiantado o que vai dar certo ou não. Eu mesmo já passei por esse problema haha, mesmo vc tirando o menu da tela o btn continua checkado, ai da pau mesmo... De qq forma que bom que ajudei, boa sorte ai no projeto! []´s
    – hugocsl
    23/05/2018 às 0:58

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .