Я получаю всплывающее меню вновь появляться над меню, нажав значок гамбургера. Как я могу заставить меню только что появ ⇐ Html

[Anonymous]

HTML и CSS ниже, у меня есть проблемы с мобильным представлением. Нажмите на меню гамбургера, всплывающее окно автоматически появляется в верхней части меню внизу. Я попытался использовать Z-индекс, чтобы включить меню в верхней части всплывающего окна, но я не хочу, чтобы всплывало появилось при нажатии кнопки гамбургера. У моего кода нет кнопки в HTML, но он по -прежнему функционирует как кнопка. Я использую Target: класс, чтобы сделать гамбургер целью #menu, и вы можете увидеть ее в HTML. Но сделать только меню, открываемое на мобильном представлении, не происходит, всплывающее окно также запускается. pre Class = "lang-html prettyprint-override">







код для всплывающего меню
Я пытаюсь включить всплывающее окно < /p>



×



style="width:100%">






< /code>
** Меню HTML -код включен ниже. ** < /p>

• 
  
  height="100" width="150">
• Home
• Join Our Team
• Life Coaching
• Products
• Wellness Consult
• About
• Blog
• [url=mailto:[email protected]]Contact[/url]
• ×

< /code>
CSS-код ниже < /p>
@media (max-width: 768px) {
li a {
text-decoration: none;
display: block;
color: #416565;
padding: 8px;
text-decoration: none;
text-align: center;
}

ul {
list-style: none;
top: 40px;
margin: 0;
padding: 0;
width: 200px;
height: auto;
background-color: lightgrey;
min-width: 100%;
left: 50%;
transform: translateX(-50%);
position: relative;
}

/* Change the link color on hover */
li a:hover {
color: #559b98;
}

/* Hide the menu by default on mobile */
.menu {
display: none;
}

/* Style the hamburger menu on mobile */
.hamburger {
position: absolute;
background: white;
border: none;
cursor: pointer;
padding: 10px;
width: 14px; /* adjust to your desired width */
height: 8px; /* adjust to your desired height */
right: 20px;
}

.bar {
position: absolute;
width: 100%;
height: 2px; /* adjust to your desired thickness */
background-color: #333; /* adjust to your desired color */
transition: transform .2s;
margin: 5px auto;
}

.bar:nth-child(1) {
top: 25%;
}
.bar:nth-child(2) {
top: 50%;
}
.bar:nth-child(3) {
top: 75%;
}

/* Show the menu when the target class is applied */
#menu:target {
display: block;
}

.close2 {
position: absolute;
top: 1rem;
right: 1rem;
display: none;
border: none;
color: black;
cursor: pointer;
}
.menu:target .close2 {
display: block;
}

/* Popup code responsive */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 2;
}

.overlay:not(:target) {
visibility: visible;
opacity: 1;
}

.popup {
top: 35px;
margin: 1px auto;
padding: 5px;
border-radius: 0;
width: 59vh;
position: relative;
transition: all 5s ease-in-out;
z-index: 1;
overflow: auto;
}

.popup .close {
position: absolute;
top: 0;
right: 20px;
transition: all 200ms;
font-size: 40px;
font-weight: bold;
text-decoration: none;
color: #333;
z-index: 3;
}
.popup .close:hover {
color: #637E76;
}

.popup .content {
max-height: 100%;
width: 95%;
justify-content: center;
/* text-align: center; */
margin: auto;
}
.popup .content img {
margin: 5px;
}

.popup .span a img {
position: absolute;
width: 45%;
bottom: 5%;
right: 25%;
}

#popup1 {
animation-name: welcome;
animation-duration: 2s;
}

@keyframes welcome {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}

/* Desktop Styles */
@media (min-width: 768px) {
.close2 {
display: none;
}

.menu {
display: block;
position: fixed;
top: 60;
left: 10;
width: 200px;
height: 85%;
background-color: white;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
z-index: 2;
}

.hamburger {
display: none;
}

li a {
text-decoration: none;
display: block;
color: #416565;
padding: 8px 1px;
text-align: left;
}

ul {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
background-color: white;
min-width: 50%;
height: auto;
left: 50%;
transform: translateX(-50%);
position: relative;
}

/* Change the link color on hover */
li a:hover {
color: #559b98;
}

/* Popup code responsive */
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
z-index: 2;
}

.overlay:not(:target) {
visibility: visible;
opacity: 1;
}

.popup {
top: 35px;
margin: 1px auto;
padding: 5px;
border-radius: 0;
width: 59vh;
position: relative;
transition: all 5s ease-in-out;
z-index: 1;
overflow: auto;
}

.popup .close {
position: absolute;
top: 0;
right: 20px;
transition: all 200ms;
font-size: 40px;
font-weight: bold;
text-decoration: none;
color: #333;
z-index: 3;
}
.popup .close:hover {
color: #637E76;
}

.popup .content {
max-height: 100%;
width: 95%;
justify-content: center;
/* text-align: center; */
margin: auto;
}
.popup .content img {
margin: 5px;
}

.popup .span a img {
position: absolute;
width: 45%;
bottom: 5%;
right: 25%;
}

#popup1 {
animation-name: welcome;
animation-duration: 2s;
}

@keyframes welcome {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/794 ... on-how-can