<ul>
  <li>
    <label for="menu1">Tencere</label>
    <input class="menuAC" type="checkbox" id="menu1">
    <ul>
      <li class="geri"><label for="menu1"><</label></li>
      <li>Tencere1</li>
      <li>Tencere2</li>
      <li>Tencere3</li>
    </ul>
  </li>
  <li>Tava</li>
  <li>Borcam</li>
  <li>Sini</li>
  <li>Düdüklü</li>
</ul>

@import url('https://fonts.googleapis.com/css2?family=Viaoda+Libre&display=swap');

body{
  font-family: 'Viaoda Libre', cursive;
  font-size: 24px;
  background-color: #fafafa;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

ul li {
  display: flex;
  cursor: pointer;
}

.menuAC {
  display: none;
}

@media (min-width:767px) {
  ul > li {
    display: inline-flex;
    padding: 10px;
  } 
}

/* dokunmatik menü */
@media (hover: none) {
  ul {
    width: 120px;
  }
  
  ul li ul {
    position:absolute;
    left: 50px;
    transform: translateX(-300px);
    transition:transform .2s ease-in-out;
    border-bottom: 1px solid black;
  }
  
  .menuAC:checked + ul {
      transform: translateX(0);
      height:auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    background: white;
  }
}

/* Desktop menu */
@media(hover: hover) and (pointer: fine) {
  ul li {
    position: relative;
  }
  
  li.geri {
    display: none;  
  }
  
  ul li:after {
    content: '|';
    padding-left: 20px;
  }
  
  ul li li:after{
    content: '';
  }
  
  ul li ul {
    position:absolute;
    display: none;
  }
  
  ul li ul li {
    display: block;
  }
  
  ul li:hover ul {
    top: 30px;
    left: 0;
    display: block;
  }
}