SUBMENUS HOW TO OPEN ON CLICK

Question

Good afternoon, I’m trying to configure my menu by clicking appear the sub menu, I just don’t know why not calling, if anyone has a suggestion. (OBS: I put the <script type="text/javascript" src="js/script.js"></script> on the menu page).

Código Menu:

     <nav class="meen">
                <div>           
                    <ul>
                        <li>
                            <a href="#" class="oculto">SALA DE AULAS VIRTUAIS</a>
                                
                            <ul class="itenbtn">
                                <li><a href="#">CURSOS ONLINE & AULA +</a></li>
                                <li><a href="#">CURSOS $ CONCURSOS</a></li>
                            </ul>
                        </li>   
                   </ul>
           </nav>
           <script type="text/javascript" src="js/script.js"></script>
        </div>      
        </body>
    </html>

 Código CSS:
    .meen{
        background: #15aebc;
        width: 250px;
        height:100%;    
    }
    .meen ul{
        padding: 1px 1px;
        background: #15aebc;
        height:100%;
        width:100%;
        list-style: none;
    }
    .meen ul li{
        line-height: 50px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .meen ul li a{  
        font-family:'Poppins', sans-serif;
        color: white;
        font-size: 15px;
        text-decoration: none;  
    }
    .meen ul li:hover{
        background: #118c97;
    }
    .meen ul ul{
        display:none;
        
    }
    .meen ul .itenbtn.mostra{
        display: block;
    }

Código Script:
$('.oculto').click(function(){
    $('.meen ul .itenbtn').toggleClass('mostra');
});

Answer 1

Robson, your code is functional, but if your goal is to open the menu by clicking on the green area, I recommend making the modifications below:

$('.oculto').click(function() {
$('.meen ul .itenbtn').toggleClass('mostra');
});

.meen {
background: #15aebc;
width: 250px;
height: 100%;
}
.meen ul {
padding: 1px;
background: #15eabc;
height: 100%;
width: 100%;
list-style: none;
}
.meen ul li {
line-height: 50px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.meen ul li a {
color: white;
font-size: 15px;
text-decoration: none;
/* ADICIONAR AS LINHAS ABAIXO */
display: inline-block;
width: 100%;
}
.meen ul li:hover {
background: #118c97;
}
.meen ul ul {
display: none;
}
.meen ul .itenbtn.mostra {
display: block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class='meen'>
  <div>
    <ul>
      <li>
        <a href="#" class="oculto">Sala de aulas virtuais</a>
        <ul class="itenbtn">
          <li><a href#>Curso Online & Aula</a></li>
          <li><a href#>Cursos & Concursos</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

To summarize: Add display: inline-block and width: 100% will link (tag a) occupy all li;

I hope I’ve helped.

Answer 2

You can use the display: inline-block´ e width: 100%`

remembering that you can use the bootstrap to help you in the classes, even more so with this type of application (where the bootstrap is excellent)

https://getbootstrap.com/