Problems with drop down

Navigation
0

I'm using an unordered list to do a drop down, I've inherited all CSS characteristics and called the corresponding functions but my drop down is not displayed (even the console does not point to errors) follows the code. 

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Empresa X</title>
    <link rel="stylesheet" href="_css/css.css"/>
</head>
<body>
    <header id="cabecalho">
        <h1 id="tituloPagina">Empresa XYZ</h1>
        <nav id="menuSite">
            <ul id="listaCompleta">
                <li>Principal</li>
                <li>Perfil</li>
                <li id="funcao" onmouseover=" showMenu()" onmouseleave="javascript: closeMenu()">Função
                    <ul id="subMenu">
                    <li id="dadosDaFuncao">Dados da Funcao</li>
                    </ul>
                </li>
                <!--<li>Equipe-->
                    <!--<ul class="open">-->
                    <!--<li class="subMenu">Supervisor <a href="Supervisor.html"></a></li>-->
                    <!--<li class="subMenu">Integrantes <a href="Integrantes.html"></a></li>-->
                    <!--</ul>-->
                <!--</li>-->
                <li>Sair</li>
            </ul>
        </nav>
        <img src="_imagens/usuarioLogin.png" id="logoEmpresa"/>
        <img src="_imagens/imagem_header.jpg" id="imagemHeader"/>
    </header>
    <section id="sessaoDoMenu">

        <div class="ladoEsquerdo">
            <div id="calendario">
                <img src="_imagens/calendario.jpg">
                <h1>Calendário</h1>
            </div>
            <div id="faleConosco">
                <img src="_imagens/faleConosco.png">
                <h1>Fale Conosco</h1>
            </div>
            <div id="avisos">
                <img src="_imagens/avisos.jpg">
                <h1>Avisos</h1>
            </div>
        </div>

        <div class="ladoDireito">

            <div id="alterarSenha">
                <img src="_imagens/alterarSenha.png">
                <h1>Alterar Senha</h1>
            </div>
            <div id="alterarDados">
                <img src="_imagens/alterarDados1.jpg">
                <h1>Alterar Dados</h1>
            </div>
            <div id="metas">
                <img src="_imagens/metas.jpg">
                <h1>Metas</h1>
            </div>
        </div>
    </section>
    <footer id="rodape">
        <h1>Atividade com objetivo educacional</h1>
    </footer>
<script src="_js/scripit.js"></script>
</body>
</html>
  

css.css file 

body{
    margin-left: 12%;
    width: 1000px;
    height: 800px;
}
  /*CABECALHO*/
header#cabecalho h1#tituloPagina{
    width: 205px;
    position: absolute;
}

header#cabecalho h1#tituloDados{
    width: 237px;
    position: absolute;
}

header#cabecalho{
    margin-top: -34px;
    padding: 50px;
    display: block;
}

    /*MENU*/

nav#menuSite{
    position: relative;
    display: block;
    margin-top: 52px;
    margin-left: -39px;
}

nav#menuSite ul{
    position: absolute;
    list-style: none;
    margin-top: 8px;
    padding: 5px;
}

ul#listaCompleta >li:hover{
    background-color: darkblue;
    color: white;
}

nav#menuSite li{
    display: inline-block;
    padding: 12px;
    margin-right: -7px;
    background-color: white;
}

ul#subMenu li#dadosDaFuncao {
    display: none;
    color: white;
    background-color: darkblue;
}

header#cabecalho img#logoEmpresa{
    display: block;
    float: right;
}

    /*MENUPRINCIPAL*/

section#sessaoDoMenu{
    border-top: double;
    margin-left: 50px;
    width: 886px;
    height: 500px;
    display: block;
    margin-top: -40px;
}

section#sessaoDoMenu div.ladoEsquerdo{
    float: left;
    margin-left: 15%;
    margin-top: 50px;
}

    /*CALENDARIO*/

div.ladoEsquerdo div#calendario{
    width: 130px;
}

div#calendario h1{
    text-align: center;
}

div#calendario img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*FALECONOSCO*/
div.ladoEsquerdo div#faleConosco{
    width: 137px;
}

div#faleConosco h1{
    text-align: center;
}

div#faleConosco img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}
    /*AVISOS*/
div.ladoEsquerdo div#avisos{
    width: 140px;
}

div#avisos h1{
    text-align: center;
}

div#avisos img{
    margin-left: 26px;
    margin-top: 10px;
    margin-bottom: -35px;
}

section#sessaoDoMenu div.ladoDireito{
    position: relative;
    float: right;
    margin-right: 15%;
    margin-top: 50px;
}

    /*ALTERAR SENHA*/

div.ladoDireito div#alterarSenha{
    width: 145px;
}

div#alterarSenha h1{
    text-align: center;
}

div#alterarSenha img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*ALTERAR DADOS*/

div.ladoDireito div#alterarDados{
    width: 146px;
}

div#alterarDados h1{
    text-align: center;
}

div#alterarDados img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}

    /*METAS*/

div.ladoDireito div#metas{
    width: 140px;
}

div#metas h1{
    text-align: center;
}

div#metas img{
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: -33px;
}

    /*FOOTER*/

footer#rodape{
    border-top: double;
    text-align: center;
    font-size: 12px;
    width: 886px;
    margin-left: 50px;
}
  

Scripit.js file 

function showMenu() {
    var sub = document.getElementById("subMenu");
    sub.style.display = "block";
    console.log(sub);
}

function closeMenu() {
    var sub = document.getElementById("subMenu");
    sub.style.display = "none";
}
    
asked by anonymous 10.11.2017 / 02:48

1 answer

1

You can do this with CSS instead of JavaScript.

Using CSS

Add the code to your CSS: 

<style>
#funcao:hover #subMenu li{
   display: block;
}
</style>

and remove this from the <li> element:

onmouseover="showMenu ()" onmouseleave="javascript: closeMenu ()" 

body{
    margin-left: 12%;
    width: 1000px;
    height: 800px;
}
  /*CABECALHO*/
header#cabecalho h1#tituloPagina{
    width: 205px;
    position: absolute;
}

header#cabecalho h1#tituloDados{
    width: 237px;
    position: absolute;
}

header#cabecalho{
    margin-top: -34px;
    padding: 50px;
    display: block;
}

    /*MENU*/

nav#menuSite{
    position: relative;
    display: block;
    margin-top: 52px;
    margin-left: -39px;
}

nav#menuSite ul{
    position: absolute;
    list-style: none;
    margin-top: 8px;
    padding: 5px;
}

ul#listaCompleta >li:hover{
    background-color: darkblue;
    color: white;
}

nav#menuSite li{
    display: inline-block;
    padding: 12px;
    margin-right: -7px;
    background-color: white;
}

ul#subMenu li#dadosDaFuncao {
    display: none;
    color: white;
    background-color: darkblue;
}

header#cabecalho img#logoEmpresa{
    display: block;
    float: right;
}

    /*MENUPRINCIPAL*/

section#sessaoDoMenu{
    border-top: double;
    margin-left: 50px;
    width: 886px;
    height: 500px;
    display: block;
    margin-top: -40px;
}

section#sessaoDoMenu div.ladoEsquerdo{
    float: left;
    margin-left: 15%;
    margin-top: 50px;
}

    /*CALENDARIO*/

div.ladoEsquerdo div#calendario{
    width: 130px;
}

div#calendario h1{
    text-align: center;
}

div#calendario img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*FALECONOSCO*/
div.ladoEsquerdo div#faleConosco{
    width: 137px;
}

div#faleConosco h1{
    text-align: center;
}

div#faleConosco img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}
    /*AVISOS*/
div.ladoEsquerdo div#avisos{
    width: 140px;
}

div#avisos h1{
    text-align: center;
}

div#avisos img{
    margin-left: 26px;
    margin-top: 10px;
    margin-bottom: -35px;
}

section#sessaoDoMenu div.ladoDireito{
    position: relative;
    float: right;
    margin-right: 15%;
    margin-top: 50px;
}

    /*ALTERAR SENHA*/

div.ladoDireito div#alterarSenha{
    width: 145px;
}

div#alterarSenha h1{
    text-align: center;
}

div#alterarSenha img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*ALTERAR DADOS*/

div.ladoDireito div#alterarDados{
    width: 146px;
}

div#alterarDados h1{
    text-align: center;
}

div#alterarDados img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}

    /*METAS*/

div.ladoDireito div#metas{
    width: 140px;
}

div#metas h1{
    text-align: center;
}

div#metas img{
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: -33px;
}

    /*FOOTER*/

footer#rodape{
    border-top: double;
    text-align: center;
    font-size: 12px;
    width: 886px;
    margin-left: 50px;
}

#funcao:hover #subMenu li{
   display: block;
}
<header id="cabecalho">
   <h1 id="tituloPagina">Empresa XYZ</h1>
   <nav id="menuSite">
      <ul id="listaCompleta">
         <li>Principal</li>
         <li>Perfil</li>
         <li id="funcao">Função
            <ul id="subMenu">
               <li id="dadosDaFuncao">Dados da Funcao</li>
            </ul>
         </li>
         <!--<li>Equipe-->
         <!--<ul class="open">-->
         <!--<li class="subMenu">Supervisor <a href="Supervisor.html"></a></li>-->
         <!--<li class="subMenu">Integrantes <a href="Integrantes.html"></a></li>-->
         <!--</ul>-->
         <!--</li>-->
         <li>Sair</li>
      </ul>
   </nav>
   <img src="_imagens/usuarioLogin.png" id="logoEmpresa"/>
   <img src="_imagens/imagem_header.jpg" id="imagemHeader"/>
</header>
<section id="sessaoDoMenu">

   <div class="ladoEsquerdo">
      <div id="calendario">
         <img src="_imagens/calendario.jpg">
         <h1>Calendário</h1>
      </div>
      <div id="faleConosco">
         <img src="_imagens/faleConosco.png">
         <h1>Fale Conosco</h1>
      </div>
      <div id="avisos">
         <img src="_imagens/avisos.jpg">
         <h1>Avisos</h1>
      </div>
   </div>

   <div class="ladoDireito">

      <div id="alterarSenha">
         <img src="_imagens/alterarSenha.png">
         <h1>Alterar Senha</h1>
      </div>
      <div id="alterarDados">
         <img src="_imagens/alterarDados1.jpg">
         <h1>Alterar Dados</h1>
      </div>
      <div id="metas">
         <img src="_imagens/metas.jpg">
         <h1>Metas</h1>
      </div>
   </div>
</section>
<footer id="rodape">
   <h1>Atividade com objetivo educacional</h1>
</footer>

But if you want to use JavaScript, do the following:

Use document.querySelectorAll() in functions to select li of #submenu , thus: 

function showMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "block";
    console.log(sub);
}

function closeMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "none";
}


function showMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "block";
    //console.log(sub);
}

function closeMenu() {
    var sub = document.querySelectorAll('#subMenu li')[0];
    sub.style.display = "none";
}
body{
    margin-left: 12%;
    width: 1000px;
    height: 800px;
}
  /*CABECALHO*/
header#cabecalho h1#tituloPagina{
    width: 205px;
    position: absolute;
}

header#cabecalho h1#tituloDados{
    width: 237px;
    position: absolute;
}

header#cabecalho{
    margin-top: -34px;
    padding: 50px;
    display: block;
}

    /*MENU*/

nav#menuSite{
    position: relative;
    display: block;
    margin-top: 52px;
    margin-left: -39px;
}

nav#menuSite ul{
    position: absolute;
    list-style: none;
    margin-top: 8px;
    padding: 5px;
}

ul#listaCompleta >li:hover{
    background-color: darkblue;
    color: white;
}

nav#menuSite li{
    display: inline-block;
    padding: 12px;
    margin-right: -7px;
    background-color: white;
}

ul#subMenu li#dadosDaFuncao {
    display: none;
    color: white;
    background-color: darkblue;
}

header#cabecalho img#logoEmpresa{
    display: block;
    float: right;
}

    /*MENUPRINCIPAL*/

section#sessaoDoMenu{
    border-top: double;
    margin-left: 50px;
    width: 886px;
    height: 500px;
    display: block;
    margin-top: -40px;
}

section#sessaoDoMenu div.ladoEsquerdo{
    float: left;
    margin-left: 15%;
    margin-top: 50px;
}

    /*CALENDARIO*/

div.ladoEsquerdo div#calendario{
    width: 130px;
}

div#calendario h1{
    text-align: center;
}

div#calendario img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*FALECONOSCO*/
div.ladoEsquerdo div#faleConosco{
    width: 137px;
}

div#faleConosco h1{
    text-align: center;
}

div#faleConosco img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}
    /*AVISOS*/
div.ladoEsquerdo div#avisos{
    width: 140px;
}

div#avisos h1{
    text-align: center;
}

div#avisos img{
    margin-left: 26px;
    margin-top: 10px;
    margin-bottom: -35px;
}

section#sessaoDoMenu div.ladoDireito{
    position: relative;
    float: right;
    margin-right: 15%;
    margin-top: 50px;
}

    /*ALTERAR SENHA*/

div.ladoDireito div#alterarSenha{
    width: 145px;
}

div#alterarSenha h1{
    text-align: center;
}

div#alterarSenha img{
    margin-left: 20px;
    margin-bottom: -20px;
}

    /*ALTERAR DADOS*/

div.ladoDireito div#alterarDados{
    width: 146px;
}

div#alterarDados h1{
    text-align: center;
}

div#alterarDados img{
    margin-left: 20px;
    margin-top: 19px;
    margin-bottom: -20px;
}

    /*METAS*/

div.ladoDireito div#metas{
    width: 140px;
}

div#metas h1{
    text-align: center;
}

div#metas img{
    margin-left: 20px;
    margin-top: 12px;
    margin-bottom: -33px;
}

    /*FOOTER*/

footer#rodape{
    border-top: double;
    text-align: center;
    font-size: 12px;
    width: 886px;
    margin-left: 50px;
}

#fusncao:hover #subMenu li{
   display: block;
}
<header id="cabecalho">
   <h1 id="tituloPagina">Empresa XYZ</h1>
   <nav id="menuSite">
      <ul id="listaCompleta">
         <li>Principal</li>
         <li>Perfil</li>
         <li id="funcao" onmouseover="showMenu()" onmouseleave="closeMenu()">Função
            <ul id="subMenu">
               <li id="dadosDaFuncao">Dados da Funcao</li>
            </ul>
         </li>
         <!--<li>Equipe-->
         <!--<ul class="open">-->
         <!--<li class="subMenu">Supervisor <a href="Supervisor.html"></a></li>-->
         <!--<li class="subMenu">Integrantes <a href="Integrantes.html"></a></li>-->
         <!--</ul>-->
         <!--</li>-->
         <li>Sair</li>
      </ul>
   </nav>
   <img src="_imagens/usuarioLogin.png" id="logoEmpresa"/>
   <img src="_imagens/imagem_header.jpg" id="imagemHeader"/>
</header>
<section id="sessaoDoMenu">

   <div class="ladoEsquerdo">
      <div id="calendario">
         <img src="_imagens/calendario.jpg">
         <h1>Calendário</h1>
      </div>
      <div id="faleConosco">
         <img src="_imagens/faleConosco.png">
         <h1>Fale Conosco</h1>
      </div>
      <div id="avisos">
         <img src="_imagens/avisos.jpg">
         <h1>Avisos</h1>
      </div>
   </div>

   <div class="ladoDireito">

      <div id="alterarSenha">
         <img src="_imagens/alterarSenha.png">
         <h1>Alterar Senha</h1>
      </div>
      <div id="alterarDados">
         <img src="_imagens/alterarDados1.jpg">
         <h1>Alterar Dados</h1>
      </div>
      <div id="metas">
         <img src="_imagens/metas.jpg">
         <h1>Metas</h1>
      </div>
   </div>
</section>
<footer id="rodape">
   <h1>Atividade com objetivo educacional</h1>
</footer>
  

Hint: where you're calling the function this way onmouseleave="javascript: closeMenu()" , no need to place    javascript: , just put the function in this way    onmouseleave="closeMenu()" , because these attributes already execute   JavaScript;

    
10.11.2017 / 03:24
HTML / PHP code block Ajax requests do not stop loading