Two menus with same css but only one is working on touch device

Question

On my website (Link: https://damaristhalmann.ch/) there are two hoover drop downs ("menu (fotografie)" + "contact") which open when hoovering. On a touch screen device the "contact"-dropdown is working but not the dropdown "menu (fotografie)".

As far as I understood the css structure is the same but not the result. There are some small differences in HTML markup but as menu (fotografie) is a WordPress generated menu I don't want to change it.

Can you help me analyzing my probmel with this hoover drop down "menu (fotografie)" which is not working on touch devices?

Thank you for your help!

Best wishes L

Answer 1

It is not working on Fotografie, because you don't have any element that is saving the dropdown sate (if is being show or not). In the Kontackt link however, there is an hidden input of type checkbox, that is managing the state of the li's elements.

You want to have something like this to all the dropdown headers:

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  list-style: none;
}

.nav {
  padding: 1em;
  width: 20vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, right bottom, from(lightblue), to(lightgreen));
  background: linear-gradient(to bottom right, lightblue, lightgreen);
}

.nav .main_item {
  position: relative;
}

.nav .main_item h3 {
  cursor: pointer;
}

.nav .main_item h3::after {
  content: "\25B8";
}

.nav .main_item .flow-control:checked + h3::after {
  content: "\25BE";
}

.nav .main_item .flow-control {
  opacity: 0;
  position: absolute;
  top: 6px;
  width: 100%;
  cursor: pointer;
}

.nav .main_item .flow-control:checked ~ ul {
  display: block;
}

.nav .main_item ul {
  margin-bottom: 1em;
  display: none;
}

  <ul class="nav">
        <li class="main_item">
            <input type="checkbox" class="flow-control">
            <h3>Header 1</h3>
            <ul>
                <li class="sub_item">Sub-item 1</li>
                <li class="sub_item">Sub-item 2</li>
                <li class="sub_item">Sub-item 3</li>
            </ul>
        </li>

        <li class="main_item">
            <input type="checkbox" class="flow-control">
            <h3>Header 2</h3>
            <ul>
                    <li class="sub_item">Sub-item 1</li>
                    <li class="sub_item">Sub-item 2</li>
                    <li class="sub_item">Sub-item 3</li>
            </ul>
        </li>
        
        <li class="main_item">
            <input type="checkbox" class="flow-control">
            <h3>Header 3</h3>
            <ul>
                    <li class="sub_item">Sub-item 1</li>
                    <li class="sub_item">Sub-item 2</li>
                    <li class="sub_item">Sub-item 3</li>
            </ul>
        </li>
    </ul>

Where each header, has his unique checkbox, to manage the ul state.