CSS menu closing when clicking on the inside items

Question

I made the following menu on css and opening/closing is working normal, but when I click on some item of the submenu, the menu closes before redirecting.

Would have some way around that problem?

#menu {
  position: relative;
  float: left;
  display: inline-block;
  margin: 10px 100px;
}

.item {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #969696;
  margin-left: 30px;
  cursor: pointer;
 }

.open-button {
  display: block;
  width: 100%;
  background-image: url(../../img/select-arrow-down.png);
  background-repeat: no-repeat;
  background-position: top right;
  padding-right: 20px;
}

.open-button:focus {
  pointer-events: none;
 }

.open-button:focus + ul {
  display: block;
}

ul {
  position: absolute;
  display: none;
  top: 40px;
  right: -20px;
  width: 200px;
  z-index: 10;
  border-radius: 5px;
  box-shadow: 0px 4px 6px #ccc;
  background-color: #fafafa;
}

li {
  position: relative;
  float: left;
  display: inline-block;
  width: 100%;
}

a {
  position: relative;
  float: left;
  display: inline-block;
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding: 0 25px;
}

a:hover {
  background-color: #f0f0f0;
  text-decoration: none;
}

<nav id="menu">
  <div class="item">
      <span class="open-button" tabindex="0">Menu</span>

    <ul>
         <li>
           <a href="{{ route('cliente-conta') }}">Meus dados</a>
         </li>

         <li>
           <a href="{{ route('pedidos') }}">Meus pedidos</a>
         </li>

         <li>
           <a href="{{ route('cliente-logout') }}">Sair</a>
         </li>
      </ul>
    </div>
</nav>

Answer 1

Diego you can’t keep the menu open because you’re using the pseudo class :focus to open the Menu, so when you change the :focus (by clicking on the link) menu .open-button:focus lose focus and close Menu. I made an example that can serve you. I haven’t done all the CSS of the menu that opens pq I think is not the goal here.

To solve your problem I made the Menu using a checkbox, when it is checked opens the menu, and when it does not close the menu with display:block/none and the stylization vc makes using the pseudo class :checked

See below for a simple template using a pseudo element ::after to make an icon when opening and closing (all very simple, but you can use images in content:'' if you want)

.item {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #969696;
  margin-left: 30px;
  cursor: pointer;
}
.item {
  font-family: 'Open Sans', sans-serif;
  position: relative;
  display: inline-block;
  font-size: 12.5px;
  color: #969696;
  margin-left: 30px;
  cursor: pointer;
}

nav input[type="checkbox"] {
    display: none;
}

ul {
    display: none;
}
input:checked ~ ul {
    display: block;
}
input:checked + label {
    color: red;
}
input + label::after {
    content: " +";
    font-size: 24px;
    font-weight: bold;
}
input:checked + label::after {
    content: " -";
    color: red;
}

<nav>
    <input type="checkbox" id="menu">
    <label class="item" for="menu">Menu</label>
    <ul>
        <li>
            <a href="{{ route('cliente-conta') }}">Meus dados</a>
        </li>
        <li>
            <a href="{{ route('pedidos') }}">Meus pedidos</a>
        </li>
        <li>
            <a href="{{ route('cliente-logout') }}">Sair</a>
        </li>
    </ul>
</nav>

OBS: I had to move a little bit in the structure of the tags in HTML, but nothing more, actually it was even simpler to understand.