i wanted to ask, how to make a menu for three separate devices, smallest one with dropdown menu, the other ones just showing menu with this code:

☰ Menu

menu of the smallest device
menu of the bigger devices

my problem is, that i cant apply the separate condition for smallest device and the other two

css

Globální stylizace */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
}

header {
background: #0044ff;
color: #fff;
justify-content: space-between;
align-items: center;
display: flex;
flex-direction: row;
padding: 0.5em 1em;
}

nav {
background-color: azure;
width:100%;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}

nav ul li {
margin: 0 1em;
}

.toggle {
display: none;
}

#toggle {
display: none;
}

Stylizace pro telefony – dropdown menu */
@media (max-width: 400px) {
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}

  .dropdown {

position: relative;
display: flex;
flex-direction: column;
width: 100%;
transform: translateX(-100%);

  }

  .dropdown-content {

display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
right: 0;
width: 100%;
}

  .dropdown-content a {

color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

  .dropdown-content a:hover {background-color: #ddd;background:transparent;}

  .dropdown:hover .dropdown-content {display: block;}

  .dropdown:hover .dropbtn {background-color: #3e8e41;}}

Stylizace pro menší tablety – dvě řádky menu /
@media (min-width: 401px) and (max-width: 720px) {
.dropbtn {
display: none; / Hide dropdown button on larger devices */
}

.dropdown-content {

display: block; /* Always show the dropdown content */
position: static;
width: 100%;
box-shadow: none;
}

.dropdown-content ul {

display: flex;
flex-wrap: wrap;
}

.dropdown-content ul li {

flex: 1 1 50%; /* Half-width items */
text-align: center;
margin: 0.5em 0;
}
}

Stylizace pro větší zařízení – jedna řádka menu /
@media (min-width: 721px) {
.dropbtn {
display: none; / Hide dropdown button on larger devices */
}

.dropdown-content {

display: block; /* Always show the dropdown content */
position: static;
width: 100%;
box-shadow: none;
}

.dropdown-content ul {

display: flex;
flex-wrap: nowrap;
}

.dropdown-content ul li {

flex: none;
margin: 0 1em;
}
}

html:

    <h1 id="logo">LOGO</h1>
    <input type="checkbox" id="toggle" />
    <label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu">☰ Menu</label>
    
    <div class="dropdown">
        <button class="dropbtn">Dropdown</button>
        <nav class="dropdown-content">
            <ul>
                <li><a href="index.html">Lorem</a></li>
                <li><a href="ipsum.html">Ipsum</a></li>
                <li><a href="dolor.html">Dolor</a></li>
                <li><a href="sit-amet.html">Sit amet</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="links.html">Links</a></li>
            </ul>
        </nav>
    </div>
</header>