Мое вертикальное меню автоматически закрывается, когда я перехожу от медиа-запроса к другому. Вместо этого я бы не показ ⇐ CSS

[Anonymous]

Я реализую меню-гамбургер (меню в коде представляет собой локальный файл, а во фрагменте вы его не увидите), и оно отлично работает. Я использую псевдокласс :checked и элемент ввода флажка для имитации щелчка.
Моя проблема в том, что когда я перехожу от большого медиа-запроса (большие экраны) к маленькому медиа-запросу, запрос (маленькие экраны) мое вертикальное меню автоматически закрывается, а не должно появляться вообще. Как это исправить?

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

body {
margin: 1.2em;
font-family: Georgia, "Times New Roman", Times, serif;
padding: 0;
line-height: 1.3;
font-size: 1.05em;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}

footer,
header,
nav {
font-family: Tahoma, Geneva, sans-serif;
}

/*#region HEADER*/

.main-header {
background-color: #f38630;
}

.main-header .inner,
main .main-footer .inner {
margin: 0 20px;
padding: 20px;
color: #fff;
}

.main-header .inner a {
font-size: 0.8em;
font-weight: 400;
color: #fff;
display: block;
}

nav.pageBody input {
display: none;
}

nav.pageBody ul {
list-style: none;
margin: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: 0.5s;
transition-timing-function: ease-in-out;
}

nav.pageBody ul li a,
nav.pageBody label {
display: block;
color: white;
cursor: pointer;
background-color: #69d2e7;
text-decoration: none;
padding: 0.5em;
font-size: 1.1em;
text-align: center;
border-bottom: 1px solid white;
}

nav.pageBody ul li a:hover {
background-color: #17ccf0;
}

nav.pageBody input:checked ~ ul {
max-height: 100em;
}

nav.pageBody input:checked + label::before {
content: "Chiudi Menu";
}

nav.pageBody label {
background-image: url("menu.png");
background-repeat: no-repeat;
background-position: left 0.5em top 50%;
cursor: pointer;
text-align: right;
border-right: none;
}

nav.pageBody label::before {
content: "Apri Menu";
}

nav.pageBody ul li:last-of-type a {
border-right: none;
}

/*#endregion NAVBAR*/

.pageBody {
max-width: 1200px;
margin: 1.2em auto;
/*     background-color: red;
border:1px solid black;*/
}

@media only screen and (min-width: 768px) {
body {
line-height: 1.4;
font-size: 1.2em;
}

nav.pageBody label {
display: none;
}

nav.pageBody ul {
max-height: 100em;
}

nav.pageBody ul li {
float: left;
width: 20%;
}

nav.pageBody ul li a {
border-bottom: none;
border-right: 1px solid white;
}

nav.pageBody ul li:last-of-type a {
border-right: none;
}

}

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

Document
[*]




Header [url=javascript:(void(0))]Indietro[/url]






[list]

[*][url=#]Home[/url]
[*][url=#]About[/url]
[*][url=#]Corsi[/url]
[*][url=#]Open Day[/url]
[*][url=#]Contatti[/url]
[/list]

Подробнее здесь: https://stackoverflow.com/questions/709 ... y-to-anoth