JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF8">
	<meta name="description" content="Aras Mühendislik Makina">
	<meta name="keywords" content="Dik İşleme, CNC, Talaşlı İmalat">
	<meta name="author" content="Aras">
	<meta http-equiv="refresh" content="180">
	<title>Aras Mühendislik Makina</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<link rel="stylesheet" href="style.css">
</head>

<body id="myBody">
    <div id="menu">
        <img src="logo.jpg" alt="Smiley face" id="logo">
        <div id="burger" class="hamburger">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        <nav id="myNav">
            <ul>
                <li><a href="#">Anasayfa</a></li>
                <li><a href="#">Hakkımızda</a></li>
                <li id="products" class="products"><a href="#" class="urunler">Ürünler</a>
                    <ul id="dropdown" class="dropdownMenu">
                        <li><a href="#">Ürün 1</a></li>
                        <li><a href="#">Ürün 2</a></li>
                        <li><a href="#">Ürün 3</a></li>
                        <li><a href="#">Ürün 4</a></li>
                    </ul>
                </li>
                <li><a href="#">İletişim</a></li>
            </ul>
        </nav>
    </div>
    
    <script src="main.js"></script>

</body>

</html>

CSS

*{
    font-family: "Lato", sans-serif;
    margin: 0;
    padding: 0;
    /* Width and height apply to all parts of the element: content, padding and borders */
    box-sizing: border-box;
}

#logo{
    height: 70px;
    width: 70px;
}

@media(min-width: 501px){
    
    #menu{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    div nav{
        display: flex;
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
        flex: 1; 
    }

    div nav ul{
        display: flex;
        flex-direction: row;
        background-color: mediumaquamarine;
        justify-content: space-between;
        flex: 1; 
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
    }

    div nav ul li{
        display: flex; /* These 3 lines or the align the bottons vertically */
        flex-direction: column; /* These 3 lines align the bottons vertically */
        justify-content: center; /* These 3 lines align the bottons vertically */
        list-style-type: none;
        background-color: blue;
        flex: 1; 
      /* This flexbox property lets button area to fill-in the remainin space until the logo area */
        position: relative;

    }

    div nav ul li a{
        display: flex; /* These 3 lines or the align the bottons vertically */
        flex-direction: column; /* These 3 lines align the bottons vertically */
        justify-content: center; /* These 3 lines align the bottons vertically */
        text-decoration: none;
        background-color: orange;
        height: 50px;
        text-align: center;
        margin: 0.5px;
    }

    div nav ul li a:hover{
        background-color: #9f7934;
    }

    .dropdownMenu{
        display: flex;
        flex-direction: column;
        width: 100%;
        top: 60px;
        position: absolute;

        overflow: hidden;
        height: 0;
        -webkit-transition: all...

JavaScript

document.addEventListener("click", toggleDropdown);
document.getElementById("burger").addEventListener("click", toggleBurger);

var myNav = document.getElementById('myNav');
var myBody = document.getElementById('myBody');

while (myBody.childNodes.length > 0) {
    myNav.appendChild(myBody.childNodes[0]);
}


function toggleDropdown(event) {
    var dropdown = document.getElementById("dropdown");
        
    if (event.target.classList.contains('urunler')){
        dropdown.classList.toggle('show');
    } else {
        dropdown.classList.remove('show');
    }
}

function toggleBurger(event) {
    event1 = event.target.classList.contains('hamburger');
    event2 = event.target.classList.contains('bar1');
    event3 = event.target.classList.contains('bar2');
    event4 = event.target.classList.contains('bar3');
    
    if (event1 || event2 || event3 || event4){
        burger.classList.toggle('change');
    } else {
        burger.classList.remove('change');
    }
}