Dropdown menu not working on touch screen device

I have a problem where when on a phone or tablet you cant use a dropdown menu because you can't hover over something on a phone or tablet how can I fix this? I was thinking maybe a small + icon next to the dropdown menu but I'm unsure on how to implement it. Another idea was to make it so you have to click on the dropdown menu for it to open but I'm unsure how to implement that the way I have set up the navbar in my HTML

My code:

.nav {    height: var(--header-height);    display: flex;    justify-content: space-between;    align-items: center;    font-weight: var(--font-semi);  }    @media screen and (max-width: 768px) {    .nav__menu {      position: fixed;      top: var(--header-height);      right: -100%;      width: 80%;      height: 100%;      padding: 2rem;      background-color: var(--second-color);      transition: .5s;    }  }    .nav__item {    margin-bottom: var(--mb-4);  }    .nav__link {    position: relative;    color: #fff;  }    .nav__link:hover {    position: relative;  }    .nav__link:hover::after {    position: absolute;    content: "";    width: 100%;    height: 0.18rem;    left: 0;    top: 2rem;    background-color: var(--first-color);  }    .nav__logo {    color: var(--second-color);  }    .nav__toggle {    color: var(--second-color);    font-size: 1.5rem;    cursor: pointer;  }    .active::after {    position: absolute;    content: "";    width: 100%;    height: 0.18rem;    left: 0;    top: 2rem;    background-color: var(--first-color);  }    .show {    right: 0;  }    #nav li {    display: block;    position: relative;    background-color: transparent;  }    #nav li li a {    font-size: 80%;  }    #nav ul {    position: absolute;    padding: 0;    left: 0;    display: none;  }    #nav li:hover ul ul {    display: none;  }    #nav li:hover ul {    display: block;  }

<header class="l-header">    <nav class="nav bd-grid">      <div>        <a href="#" class="nav__logo">My Site Name Is Here</a>      </div>      <div class="nav__menu" id="nav-menu">        <ul class="nav__list" id="nav">          <li class="nav__item"><a href="#home" class="nav__link active">Home</a></li>          <li class="nav__item"><a href="#about" class="nav__link">About</a></li>          <li class="nav__item"><a href="#about" class="nav__link">Distributors</a></li>          <li class="nav__item"><a href="#about" class="nav__link">Contact</a></li>          <li class="nav__item"><a href="#about" class="nav__link">Elevate</a></li>          <li class="nav__item"><a href="#" class="nav__link">Products</a>            <ul>              <li style="margin-top: 30px"><a href="#" class="nav__link">Sub Item</a></li>              <li style="margin-top: 20px"><a href="#" class="nav__link">Sub Item</a></li>            </ul>          </li>      </div>        <div class="nav__toggle" id="nav-toggle">        <i class='bx bx-menu'></i>      </div>    </nav>  </header>

https://stackoverflow.com/questions/66945936/dropdown-menu-not-working-on-touch-screen-device April 05, 2021 at 05:14AM