Solved - Responsive Menu, Drop down Event via JS

Question

Solved - Responsive Menu, Drop down Event via JS

Navigation

#1 by (0 votes)
#2 by (0 votes)

1

Good morning!

I'm having some problems with JS from my responsive menu.

It happens that when you activate the responsive page function, it turns a single menu, so that's fine, but when you click it, it already brings all the expanded submenus!

I would like it to bring each one hidden, and when clicking, expand that section.

Example!

: MENU: BASIC FINANCIAL

Clicking basic ...

: MENU: BASIC .CADASTROS .CONSULES FINANCIAL

Clicking on records ...

: MENU: BASIC .CADASTROS ..Customers ..Products .CONSULES FINANCIAL

If you click on the parent Nodes, it expands your children and closes the children of the others.

The problem is that when I open, it already brings everything expanded, eg:

: MENU: BASIC .CADASTROS ..Customers ..Products .CONSULES ..Customers ..Products FINANCIAL .Chapters ..Accounts

This leaves the menu very large, and disrupts navigation on it!

(function($) {
  $(document).ready(function() {
    $('#menu_inc').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
    var activeElement = $('#menu_inc>ul>li:first');

    $('#menu_inc>ul>li').each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
      }
    });

    var posLeft = activeElement.position().left;
    var elementWidth = activeElement.width();
    posLeft = posLeft + elementWidth / 2 - 6;
    if (activeElement.hasClass('has-sub')) {
      posLeft -= 6;
    }

    $('#menu_inc #pIndicator').css('left', posLeft);
    var element, leftPos, indicator = $('#menu_inc pIndicator');

    $("#menu_inc>ul>li").hover(function() {
      element = $(this);
      var w = element.width();
      if ($(this).hasClass('has-sub')) {
        leftPos = element.position().left + w / 2 - 12;
      } else {
        leftPos = element.position().left + w / 2 - 6;
      }

      $('#menu_inc #pIndicator').css('left', leftPos);
    }, function() {
      $('#menu_inc #pIndicator').css('left', posLeft);
    });

    $('#menu_inc>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
    $("#menu-button").click(function() {
      if ($(this).parent().hasClass('open')) {
        $(this).parent().removeClass('open');
      } else {
        $(this).parent().addClass('open');
      }
    });
  });
})(jQuery);

#menu_inc {
  position: relative;
  text-align: left;
  height: 44px;
  background: #b70303;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b70303 0%, #590000 100%);
  /* FF3.6+ */
  background: -webkit-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b70303 0%, #590000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #b70303 0%, #590000 100%);
  /* W3C */
  width: auto;
}
#menu_inc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#menu_inc > ul {
  position: relative;
  display: block;
  background: #b70303;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b70303 0%, #590000 100%);
  /* FF3.6+ */
  background: -webkit-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b70303 0%, #590000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #b70303 0%, #590000 100%);
  /* W3C */
  width: 100%;
  z-index: 500;
}
#menu_inc:after,
#menu_inc > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu_inc.align-right > ul > li {
  float: right;
}
#menu_inc.align-center ul {
  text-align: center;
}
#menu_inc.align-center ul ul {
  text-align: left;
}
#menu_inc > ul > li {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}
#menu_inc > ul > #menu-button {
  display: none;
}
#menu_inc ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
}
#menu_inc > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  color: #FFF;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#menu_inc > ul > li.has-sub > a {
  padding-right: 32px;
}
#menu_inc > ul > li:hover > a {
  color: #ffffff;
}
#menu_inc li.has-sub::after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
#menu_inc > ul > li.has-sub::after {
  /*  Seta do menu Principal*/
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #FFF;
}
#menu_inc > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#menu_inc ul ul {
  position: absolute;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}
#menu_inc ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#menu_inc ul ul li {
  position: relative;
}
#menu_inc > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1;
}
#menu_inc.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
  opacity: 1;
}
#menu_inc ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#menu_inc.align-right ul ul li:hover > ul {
  left: auto;
  right: 170px;
  top: 0;
  opacity: 1;
  padding-right: 5px;
}
#menu_inc ul ul li a {
  /* Sub Menus - Fazer shadow*/
  width: 130px;
  border-bottom: 1px solid #eeeeee;
  padding: 10px 20px;
  font-size: 12px;
  color: #000;
  background: #ffffff;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
#menu_inc.align-right ul ul li a {
  text-align: right;
}
#menu_inc ul ul li:hover > a {
  /* Submenu selecionado*/
  background: #8B0000;
  color: #FFF;
}
#menu_inc ul ul li:last-child > a,
#menu_inc ul ul li.last > a {
  border-bottom: 0;
}
#menu_inc > ul > li > ul::after {
  content: '';
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #ffffff;
  position: absolute;
  top: -12px;
  left: 30px;
}
#menu_inc.align-right > ul > li > ul::after {
  left: auto;
  right: 30px;
}
#menu_inc ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #9ea2a5;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#menu_inc.align-right ul ul li.has-sub::after {
  border-left-color: transparent;
  border-right-color: #9ea2a5;
  right: auto;
  left: 10px;
}
#menu_inc ul ul li.has-sub:hover::after {
  border-left-color: #ffffff;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#menu_inc.align-right ul ul li.has-sub:hover::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
  left: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media all and (max-width: 800px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #menu_inc {
    width: auto;
  }
  #menu_inc.align-center ul {
    text-align: left;
  }
  #menu_inc.align-right > ul > li {
    float: none;
  }
  #menu_inc ul {
    width: auto;
  }
  #menu_inc .submenuArrow,
  #menu_inc #indicatorContainer {
    display: none;
  }
  #menu_inc > ul {
    height: auto;
    display: block;
  }
  #menu_inc > ul > li {
    float: none;
  }
  #menu_inc li,
  #menu_inc > ul > li {
    display: none;
  }
  #menu_inc ul ul,
  #menu_inc ul ul ul,
  #menu_inc ul > li:hover > ul,
  #menu_inc ul ul > li:hover > ul,
  #menu_inc.align-right ul ul,
  #menu_inc.align-right ul ul ul,
  #menu_inc.align-right ul > li:hover > ul,
  #menu_inc.align-right ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
    right: auto;
  }
  #menu_inc ul .has-sub::after {
    display: none;
  }
  #menu_inc ul li a {
    padding: 12px 20px;
  }
  #menu_inc ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
    color: #FFF;
  }
  #menu_inc.align-right ul ul li a {
    text-align: left;
  }
  #menu_inc ul ul li:hover > a {
    background: none;
    color: #FFF;
  }
  #menu_inc ul ul ul a {
    padding: 8px 50px;
    color: #FFF;
  }
  #menu_inc ul ul ul ul a {
    padding: 8px 65px;
  }
  #menu_inc ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #menu_inc ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #menu_inc > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #menu_inc #menu-button > a {
    padding: 14px 20px;
  }
  #menu_inc ul.open li,
  #menu_inc > ul.open > li {
    display: block;
  }
  #menu_inc > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #menu_inc ul ul::after {
    display: none;
  }
  #menu_inc #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    right: 20px;
    top: 15px;
  }
  #menu_inc #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    right: 20px;
    top: 25px;
  }
  #menu_inc ul.open #menu-button::after,
  #menu_inc ul.open #menu-button::before {
    border-color: #fff;
  }
}

<!doctype html>
<html lang='pt-BR'>
<head>
   <meta charset='ISO-8859-1'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' href='menu_style.css'>
   <script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
   <script src='menu.js' type='text/javascript'></script>
   <title>Teste de Menu</title>
</head>
<body>

<div id='menu_inc'>
<ul>
   <li class='has-sub' id='Básico'><a href='#'><span> Básico</span></a>
  <ul>
     <li class='has-sub' id='Cadastros'><a href='#'><span>Cadastros</span></a>
        <ul>
           <li id='Pessoas'><a href='#'><span>Pessoas</span></a></li>
           <li id='Clientes'><a href='#'><span>Clientes</span></a></li>
           <li id='Fornecedores'><a href='#'><span>Fornecedores</span></a></li>
           <li id='Cidades'><a href='#'><span>Cidades</span></a></li>
           <li id='Bairros'><a href='#'><span>Bairros</span></a></li>
           <li id='Endereços'><a href='#'><span>Endereços</span></a></li>
           <li id='Ingredientes'><a href='#'><span>Ingredientes</span></a></li>
           <li class='last' id='Produtos'><a href='#'><span>Produtos</span></a></li>
        </ul>
     </li>
     <li class='has-sub' id='Consultas'><a href='#'><span>Consultas</span></a>
        <ul>
           <li id='Pessoas'><a href='#'><span>Pessoas</span></a></li>
           <li id='Clientes'><a href='#'><span>Clientes</span></a></li>
           <li id='Fornecedores'><a href='#'><span>Fornecedores</span></a></li>
           <li id='Cidades'><a href='#'><span>Cidades</span></a></li>
           <li id='Bairros'><a href='#'><span>Bairros</span></a></li>
           <li id='Endereços'><a href='#'><span>Endereços</span></a></li>
           <li id='Ingredientes'><a href='#'><span>Ingredientes</span></a></li>
           <li class='last' id='Produtos'><a href='#'><span>Produtos</span></a></li>
        </ul>
     </li>
     <li class='has-sub' id='Relatórios'><a href='#'><span>Relatórios</span></a>
        <ul>
           <li class='last'><a href='#'><span>~A Inserir~</span></a></li>
        </ul>
     </li>
  </ul>
   </li>
   <li class='has-sub'><a href='#'><span> Financeiro</span></a>
  <ul>
     <li class='has-sub'><a href='#'><span>Cadastros</span></a>
        <ul>
           <li><a href='#'><span>Bancário</span></a></li>
           <li><a href='#'><span>Formas de Pagamento</span></a></li>
           <li class='last'><a href='#'><span>Taxas e Encargos</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Contas</span></a>
        <ul>
           <li><a href='#'><span>A Pagar</span></a></li>
           <li class='last'><a href='#'><span>A Receber</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Fluxo</span></a>
        <ul>
           <li><a href='#'><span>Caixa</span></a></li>
           <li class='last'><a href='#'><span>Bancário</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>NFe</span></a>
        <ul>
           <li><a href='#'><span>Emissão</span></a></li>
           <li class='last'><a href='#'><span>Consulta</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Relatórios</span></a>
        <ul>
           <li class='last'><a href='#'><span>~A Inserir~</span></a></li>
        </ul>
     </li>
  </ul>
   </li>
</ul>
</div>
<br/>
</body>

I changed my JS to another model and solved part of the problem, for the time being it is enough! Thank you.

Once you finish the edits in the same it leaves here for future consultations.

javascript jquery

asked by anonymous 22.05.2015 / 18:09

2 answers

0

Lucas, what is #menu-button ? I could not find this ID in your HTML. What you can do is to treat via jQuery the click on any item of class has-sub . In this way, all the main menu items come into play. When you click on something of this class, you have to hide all children and use $(this) to show only the children you clicked on.

22.05.2015 / 19:17

Error writing special characters Shopping cart on iOS [closed]

score 0 · Accepted Answer

Create a CSS rule to control your sub-menus as open or closed. I have created the following:

#menu_inc ul > li.has-sub > ul:not(.open){
    display:none;
}

The subclasses hide all subkey blocks ul that does not have the open class of all li s that contains the has-sub class.

Create an event that changes the class when you click the parent menu:

$('#menu_inc ul > li.has-sub a').click(function(event){
    // Evento padrão
   event.preventDefault();
   $(this).parent() // Pai 'li'
          .siblings('li.has-sub').find('ul.open').each(function(index, el) { // Filho 'ul' com classe open dos Irmãos que contém classe 'has-sub'
              $(this).slideUp('fast').removeClass('open');
          }); 

   $(this).siblings('ul').slideToggle('fast').toggleClass('open');
});

(function($) {
  $(document).ready(function() {
    $('#menu_inc').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>');
    var activeElement = $('#menu_inc>ul>li:first');

    $('#menu_inc>ul>li').each(function() {
      if ($(this).hasClass('active')) {
        activeElement = $(this);
      }
    });

    var posLeft = activeElement.position().left;
    var elementWidth = activeElement.width();
    posLeft = posLeft + elementWidth / 2 - 6;
    if (activeElement.hasClass('has-sub')) {
      posLeft -= 6;
    }

    $('#menu_inc #pIndicator').css('left', posLeft);
    var element, leftPos, indicator = $('#menu_inc pIndicator');

    $("#menu_inc>ul>li").hover(function() {
      element = $(this);
      var w = element.width();
      if ($(this).hasClass('has-sub')) {
        leftPos = element.position().left + w / 2 - 12;
      } else {
        leftPos = element.position().left + w / 2 - 6;
      }

      $('#menu_inc #pIndicator').css('left', leftPos);
    }, function() {
      $('#menu_inc #pIndicator').css('left', posLeft);
    });
    
    $('#menu_inc ul > li.has-sub a').click(function(event){
       event.preventDefault();
       $(this).siblings('ul').slideToggle('fast').toggleClass('open');
    });

    $('#menu_inc>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
    $("#menu-button").click(function() {
      if ($(this).parent().hasClass('open')) {
        $(this).parent().removeClass('open');
      } else {
        $(this).parent().addClass('open');
      }
    });
  });
})(jQuery);

#menu_inc {
  position: relative;
  text-align: left;
  height: 44px;
  background: #b70303;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b70303 0%, #590000 100%);
  /* FF3.6+ */
  background: -webkit-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b70303 0%, #590000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #b70303 0%, #590000 100%);
  /* W3C */
  width: auto;
}
#menu_inc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}
#menu_inc > ul {
  position: relative;
  display: block;
  background: #b70303;
  /* Old browsers */
  background: -moz-linear-gradient(top, #b70303 0%, #590000 100%);
  /* FF3.6+ */
  background: -webkit-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #b70303 0%, #590000 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #b70303 0%, #590000 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #b70303 0%, #590000 100%);
  /* W3C */
  width: 100%;
  z-index: 500;
}
#menu_inc:after,
#menu_inc > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu_inc.align-right > ul > li {
  float: right;
}
#menu_inc.align-center ul {
  text-align: center;
}
#menu_inc.align-center ul ul {
  text-align: left;
}
#menu_inc > ul > li {
  display: inline-block;
  position: relative;
  margin: 0;
  padding: 0;
}
#menu_inc > ul > #menu-button {
  display: none;
}
#menu_inc ul li a {
  display: block;
  font-family: Helvetica, sans-serif;
  text-decoration: none;
}
#menu_inc > ul > li > a {
  font-size: 14px;
  font-weight: bold;
  padding: 15px 20px;
  color: #FFF;
  text-transform: uppercase;
  -webkit-transition: color 0.25s ease-out;
  -moz-transition: color 0.25s ease-out;
  -ms-transition: color 0.25s ease-out;
  -o-transition: color 0.25s ease-out;
  transition: color 0.25s ease-out;
}
#menu_inc > ul > li.has-sub > a {
  padding-right: 32px;
}
#menu_inc > ul > li:hover > a {
  color: #ffffff;
}
#menu_inc li.has-sub::after {
  display: block;
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}
#menu_inc > ul > li.has-sub::after {
  /*  Seta do menu Principal*/
  right: 10px;
  top: 20px;
  border: 5px solid transparent;
  border-top-color: #FFF;
}
#menu_inc > ul > li:hover::after {
  border-top-color: #ffffff;
}
#indicatorContainer {
  position: absolute;
  height: 12px;
  width: 100%;
  bottom: 0px;
  overflow: hidden;
  z-index: -1;
}
#pIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  z-index: -2;
  -webkit-transition: left .25s ease;
  -moz-transition: left .25s ease;
  -ms-transition: left .25s ease;
  -o-transition: left .25s ease;
  transition: left .25s ease;
}
#cIndicator {
  position: absolute;
  height: 0;
  width: 100%;
  border: 12px solid transparent;
  border-top-color: #2b2f3a;
  top: -12px;
  right: 100%;
  z-index: -2;
}
#menu_inc ul ul {
  position: absolute;
  left: -9999px;
  top: 70px;
  opacity: 0;
  -webkit-transition: opacity .3s ease, top .25s ease;
  -moz-transition: opacity .3s ease, top .25s ease;
  -ms-transition: opacity .3s ease, top .25s ease;
  -o-transition: opacity .3s ease, top .25s ease;
  transition: opacity .3s ease, top .25s ease;
  z-index: 1000;
}
#menu_inc ul ul ul {
  top: 37px;
  padding-left: 5px;
}
#menu_inc ul ul li {
  position: relative;
}
#menu_inc > ul > li:hover > ul {
  left: auto;
  top: 44px;
  opacity: 1;
}
#menu_inc.align-right > ul > li:hover > ul {
  left: auto;
  right: 0;
  opacity: 1;
}
#menu_inc ul ul li:hover > ul {
  left: 170px;
  top: 0;
  opacity: 1;
}
#menu_inc.align-right ul ul li:hover > ul {
  left: auto;
  right: 170px;
  top: 0;
  opacity: 1;
  padding-right: 5px;
}
#menu_inc ul ul li a {
  /* Sub Menus - Fazer shadow*/
  width: 130px;
  border-bottom: 1px solid #eeeeee;
  padding: 10px 20px;
  font-size: 12px;
  color: #000;
  background: #ffffff;
  -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -ms-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
}
#menu_inc.align-right ul ul li a {
  text-align: right;
}
#menu_inc ul ul li:hover > a {
  /* Submenu selecionado*/
  background: #8B0000;
  color: #FFF;
}
#menu_inc ul ul li:last-child > a,
#menu_inc ul ul li.last > a {
  border-bottom: 0;
}
#menu_inc > ul > li > ul::after {
  content: '';
  border: 6px solid transparent;
  width: 0;
  height: 0;
  border-bottom-color: #ffffff;
  position: absolute;
  top: -12px;
  left: 30px;
}
#menu_inc.align-right > ul > li > ul::after {
  left: auto;
  right: 30px;
}
#menu_inc ul ul li.has-sub::after {
  border: 4px solid transparent;
  border-left-color: #9ea2a5;
  right: 10px;
  top: 12px;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#menu_inc.align-right ul ul li.has-sub::after {
  border-left-color: transparent;
  border-right-color: #9ea2a5;
  right: auto;
  left: 10px;
}
#menu_inc ul ul li.has-sub:hover::after {
  border-left-color: #ffffff;
  right: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
#menu_inc.align-right ul ul li.has-sub:hover::after {
  border-right-color: #ffffff;
  border-left-color: transparent;
  left: -5px;
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
@media all and (max-width: 800px),
only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px),
only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px),
only screen and (min-resolution: 192dpi) and (max-width: 1024px),
only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #menu_inc {
    width: auto;
  }
  #menu_inc.align-center ul {
    text-align: left;
  }
  #menu_inc.align-right > ul > li {
    float: none;
  }
  #menu_inc ul {
    width: auto;
  }
  #menu_inc .submenuArrow,
  #menu_inc #indicatorContainer {
    display: none;
  }
  #menu_inc > ul {
    height: auto;
    display: block;
  }
  #menu_inc > ul > li {
    float: none;
  }
  #menu_inc li,
  #menu_inc > ul > li {
    display: none;
  }
  #menu_inc ul ul,
  #menu_inc ul ul ul,
  #menu_inc ul > li:hover > ul,
  #menu_inc ul ul > li:hover > ul,
  #menu_inc.align-right ul ul,
  #menu_inc.align-right ul ul ul,
  #menu_inc.align-right ul > li:hover > ul,
  #menu_inc.align-right ul ul > li:hover > ul {
    position: relative;
    left: auto;
    top: auto;
    opacity: 1;
    padding-left: 0;
    padding-right: 0;
    right: auto;
  }
  #menu_inc ul .has-sub::after {
    display: none;
  }
  #menu_inc ul li a {
    padding: 12px 20px;
  }
  #menu_inc ul ul li a {
    border: 0;
    background: none;
    width: auto;
    padding: 8px 35px;
    color: #FFF;
  }
  #menu_inc.align-right ul ul li a {
    text-align: left;
  }
  #menu_inc ul ul li:hover > a {
    background: none;
    color: #FFF;
  }
  #menu_inc ul ul ul a {
    padding: 8px 50px;
    color: #FFF;
  }
  #menu_inc ul ul ul ul a {
    padding: 8px 65px;
  }
  #menu_inc ul ul ul ul ul a {
    padding: 8px 80px;
  }
  #menu_inc ul ul ul ul ul ul a {
    padding: 8px 95px;
  }
  #menu_inc > ul > #menu-button {
    display: block;
    cursor: pointer;
  }
  #menu_inc #menu-button > a {
    padding: 14px 20px;
  }
  #menu_inc ul.open li,
  #menu_inc > ul.open > li {
    display: block;
  }
  #menu_inc > ul.open > li#menu-button > a {
    color: #fff;
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
  }
  #menu_inc ul ul::after {
    display: none;
  }
  #menu_inc #menu-button::after {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    right: 20px;
    top: 15px;
  }
  #menu_inc #menu-button::before {
    display: block;
    content: '';
    position: absolute;
    height: 3px;
    width: 22px;
    border-top: 2px solid #FFF;
    right: 20px;
    top: 25px;
  }
  #menu_inc ul.open #menu-button::after,
  #menu_inc ul.open #menu-button::before {
    border-color: #fff;
  }
  
  #menu_inc ul > li.has-sub > ul:not(.open){
    display:none;
  }
}

<!doctype html>
<html lang='pt-BR'>
<head>
   <meta charset='ISO-8859-1'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
   <link rel='stylesheet' href='menu_style.css'>
   <script src="https://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
   <script src='menu.js' type='text/javascript'></script>
   <title>Teste de Menu</title>
</head>
<body>

<div id='menu_inc'>
<ul>
   <li class='has-sub' id='Básico'><a href='#'><span> Básico</span></a>
  <ul>
     <li class='has-sub' id='Cadastros'><a href='#'><span>Cadastros</span></a>
        <ul>
           <li id='Pessoas'><a href='#'><span>Pessoas</span></a></li>
           <li id='Clientes'><a href='#'><span>Clientes</span></a></li>
           <li id='Fornecedores'><a href='#'><span>Fornecedores</span></a></li>
           <li id='Cidades'><a href='#'><span>Cidades</span></a></li>
           <li id='Bairros'><a href='#'><span>Bairros</span></a></li>
           <li id='Endereços'><a href='#'><span>Endereços</span></a></li>
           <li id='Ingredientes'><a href='#'><span>Ingredientes</span></a></li>
           <li class='last' id='Produtos'><a href='#'><span>Produtos</span></a></li>
        </ul>
     </li>
     <li class='has-sub' id='Consultas'><a href='#'><span>Consultas</span></a>
        <ul>
           <li id='Pessoas'><a href='#'><span>Pessoas</span></a></li>
           <li id='Clientes'><a href='#'><span>Clientes</span></a></li>
           <li id='Fornecedores'><a href='#'><span>Fornecedores</span></a></li>
           <li id='Cidades'><a href='#'><span>Cidades</span></a></li>
           <li id='Bairros'><a href='#'><span>Bairros</span></a></li>
           <li id='Endereços'><a href='#'><span>Endereços</span></a></li>
           <li id='Ingredientes'><a href='#'><span>Ingredientes</span></a></li>
           <li class='last' id='Produtos'><a href='#'><span>Produtos</span></a></li>
        </ul>
     </li>
     <li class='has-sub' id='Relatórios'><a href='#'><span>Relatórios</span></a>
        <ul>
           <li class='last'><a href='#'><span>~A Inserir~</span></a></li>
        </ul>
     </li>
  </ul>
   </li>
   <li class='has-sub'><a href='#'><span> Financeiro</span></a>
  <ul>
     <li class='has-sub'><a href='#'><span>Cadastros</span></a>
        <ul>
           <li><a href='#'><span>Bancário</span></a></li>
           <li><a href='#'><span>Formas de Pagamento</span></a></li>
           <li class='last'><a href='#'><span>Taxas e Encargos</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Contas</span></a>
        <ul>
           <li><a href='#'><span>A Pagar</span></a></li>
           <li class='last'><a href='#'><span>A Receber</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Fluxo</span></a>
        <ul>
           <li><a href='#'><span>Caixa</span></a></li>
           <li class='last'><a href='#'><span>Bancário</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>NFe</span></a>
        <ul>
           <li><a href='#'><span>Emissão</span></a></li>
           <li class='last'><a href='#'><span>Consulta</span></a></li>
        </ul>
     </li>
     <li class='has-sub'><a href='#'><span>Relatórios</span></a>
        <ul>
           <li class='last'><a href='#'><span>~A Inserir~</span></a></li>
        </ul>
     </li>
  </ul>
   </li>
</ul>
</div>
<br/>
</body>