submenu disappears when I try to click on it

Question

I have the following menu

#cssmenu {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Ubuntu", sans-serif;
  background: #14598e;
}

#cssmenu ul {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu ul li {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#cssmenu:after, #cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#cssmenu #menu-button {
  display: none;
}

#cssmenu > ul > li {
  float: left;
}

#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}

#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}

#cssmenu.align-center ul ul {
  text-align: left;
}

#cssmenu.align-right > ul > li {
  float: right;
}

#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

#cssmenu > ul > li:hover > a {
  background-color: #1d4f72;
}

#cssmenu > ul > li.has-sub > a {
  padding-right: 30px;
}

#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 22px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #fff;
  content: "";
}

#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 19px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #fff;
  content: "";
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#cssmenu > ul > li.has-sub:hover > a:before {
  top: 23px;
  height: 0;
}

#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}

#cssmenu.align-right ul ul {
  text-align: right;
}

#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -ms-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

#cssmenu li:hover > ul {
  left: auto;
}

#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}

#cssmenu li:hover > ul > li {
  height: 60px;
}

#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 20px 30px 35px 15px;
  width: 260px;
  font-size: 13px;
  text-decoration: none;
  color: #fff;
  background: #14598e;
  text-transform: uppercase;
}

#cssmenu ul li ul li:hover > a {
  background-color: #1d4f72;
}

<div class="content">
  <div id='cssmenu'>
    <ul>
      <li><a href='inicio.html'>Inicio</a></li>
      <li class='active'><a href='#'>Soluciones</a>
        <ul>
          <li><a href='solucion1.html'>Solución 1</a></li>
          <li><a href='solucion2.html'>Solución 2</a></li>
          <li><a href='solucion3.html'>Solución 3</a></li>
        </ul>
      </li>
      <li><a href='beneficios.html'>Beneficios</a></li>
      <li><a href='cliente.html'>Clientes</a></li>
      <li><a href='empleo.html'>Empleos</a></li>
      <li><a href='#'>Blog</a></li>
    </ul>
  </div>
</div>

The problem I have is that when the size of the window is normal, the submenu is displayed correctly and it is possible to select any of the options that it has. But when I reduce the size of the window some centimeters, the submenu is displayed but when I try to select some option, it disappears immediately. I have reviewed the code and I do not see the cause of that behavior, I hope and can help me find the problem. In advance thank you very much ...

Answer 1

Adding a z-index will specify how the element stacks visually. An element with a greater z-index will have a greater stack order and will always stack in front of an element with a lower stack order.

#cssmenu ul ul {
  position: absolute;
  z-index: 1;
  left: -9999px;
}

Blockquote Note z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)