Dropdown navigation doesn't work on mobile devices (JavaScript, HTML, CSS)

I built a navigation using JS and SCSS. On desktop it works totally fine, also some mobile devices like Galaxy S10 show the dropdown menu. But most other mobile devices do nothing when I click the nav elements.

That's my JS code:

document.writeln(
  ` <ul>
<li><a href="../index.html">Start</a></li>
<li>Menu point 1<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>  
  <ul class="dropdown">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
  </ul>
</li>
<li>Menu point 2<i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-right" aria-hidden="true"></i>
    <ul class="dropdown">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
  </li>
</ul>`
);

CSS:

nav {
    z-index: 10;
    font-weight: bold;
    text-transform: uppercase;
    color: $color-dark;
    text-decoration: none;

    a {
      &:hover {
        color: $color-accent-dark;
      }
    }

      
      ul {
        list-style: none;
        margin: 0;
        padding-left: 0;

      }
      
      li {
        display: block;
        float: left;
        padding: 1rem;
        position: relative;
        text-decoration: none;
        transition-duration: 0.5s;
        min-width: 90px;

        .fa-caret-right {
          display: none;
        }
      }

        
      li:hover,
      li:focus-within {
        cursor: pointer;
        color: $color-accent-dark;


        .fa-caret-down {
          display: none;
        }

        .fa-caret-right {
          display: inline;
        }

      }
      
      li:focus-within a {
        outline: none;
      }

      ul li:last-child {
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
      }
      
      ul li ul {
        visibility: hidden;
        opacity: 0;
        min-width: 5rem;
        position: absolute;
        transition: all 0.5s ease;
        margin-top: 1rem;
        left: 0;
        display: none;
      }
      
      ul li:hover > ul,
      ul li:focus-within > ul,
      ul li ul:hover,
      ul li ul:focus {
         visibility: visible;
         opacity: 1;
         display: block;
         z-index: 15;
      }
      
      ul li ul li {
        background-color: $color-light;
        clear: both;
        width: 100%;
      }

}

I expected it to be clickable on mobile devices too but I can't find a solution on that. Do you have any ideas? Do I miss something here?

document.writeln() is not recommended to use anymore, as mentioned at mozilla developer network (MDN) https://developer.mozilla.org/en-US/docs/Web/API/Document/writeln

Also, it is ideal to use some javascript to control the visible or hidden state of the menu along with css, than doing it only using css. The way hover and focus work on desktop, may not always work exactly the same way in all touchscreen devices. Thus, it would be very difficult to guarantee the intended behaviour on all touch devices, using the hover and focus-within css selectors.