Меню для трех устройств ⇐ CSS

[Anonymous]

Я хотел спросить, как сделать меню для трех отдельных устройств: самое маленькое с выпадающим меню, а остальные просто отображают меню с помощью этого кода:

Код: Выделить всё

 ☰ Menu

меню самого маленького устройства
меню большего устройства
моя проблема в том, что я не могу применить отдельное условие для самого маленького устройства и два других
редактировать:
я пытался обойти это, используя .dropdown вместо метки, но это не сработало, поскольку для этих трех было показано одно и то же меню. устройства,

Код: Выделить всё

/* 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;
}
}

Код: Выделить всё

LOGO

☰ Menu


Dropdown

[list]
[*][url=index.html]Lorem[/url]
[*][url=ipsum.html]Ipsum[/url]
[*][url=dolor.html]Dolor[/url]
[*][url=sit-amet.html]Sit amet[/url]
[*][url=gallery.html]Gallery[/url]
[*][url=links.html]Links[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/785 ... ee-devices