在我的网站上，我有一个菜单栏，其中包含一些直接链接和两个下拉菜单。
在手机上，当我第一次在SECONDE DROPDOWN MENU上录制磁带时，它会打开，并且可以看到其链接。然后，我在FIRST DROPDOWN MENU上录音，然后打开查找。但是，现在，当我重新粘贴第二个菜单时，就好像我已经粘贴了菜单栏的下一个直接链接一样。
例如，我试图在第二个下拉菜单上放置一条死亡链接（＃），但没有成功。
如果要检查：https://www.veganimaliste.com/index.php
这是PHP HTML代码
<!-- ANCHOR BACK TO THE TOP -->
<span id="haut-page" class="anchor"></span>
<!-- ANCHOR BACK TO THE TOP END-->
<!-- LOGO AND MENU WRAPP -->
<div class="menu-wrap">
<!-- WEBSITE LOGO -->
<div class="logo"><a href="index.php" target="_self"><span class="logo-line"><span class="logo-color">veg</span>animaliste</span>.com</a> </div>
<!-- WEBSITE LOGO END-->
<!-- MENU -->
<div class="topnav" id="myTopnav">
<!-- FIRST DIRECT MENU LINK / HOME PAGE-->
<a href="index.php" title="Page d'accueil" target="_self"><img class="sans-texte" src="img/menu/home-g.png" ></a>
<!-- FIRST DIRECT MENU LINK / HOME PAGE END -->
<!-- FIRST DROPDOWN MENU -->
<div class="dropdown">
<button class="dropbtn">VÉGANISME <img src="img/menu/down-g.png"/></button>
<div class="dropdown-content">
<a href="v-intro.php" target="_self"><img src="img/menu/dot-g.png"/>Vérités ugentes à connaître</a>
<a href="articles.php" target="_self"><img src="img/menu/dot-g.png"/>Articles</a>
<a href="reponses.php" target="_self"><img src="img/menu/dot-g.png"/>Réponses aux non-véganes</a>
<a href="reponses-av.php" target="_self"><img src="img/menu/dot-g.png"/>Réponses de AV aux non-véganes</a>
<a href="qui-sont-ils.php" target="_self"><img src="img/menu/dot-g.png"/>Qui sont-ils? </a>
<a href="ce-que-nous-pouvons-faire.php" target="_self"><img src="img/menu/dot-g.png"/>Ce que nous pouvons faire</a>
</div>
</div>
<!-- DROPDOWN MENU END -->
<!-- SECONDE DROPDOWN MENU -->
<div class="dropdown">
<button class="dropbtn">DOCUMENTS <img src="img/menu/down-g.png"/></button>
<div class="dropdown-content">
<a href="videos.php" target="_self"><img src="img/menu/dot-g.png"/>Vidéos</a>
<a href="defenitions.php" target="_self"><img src="img/menu/dot-g.png"/>Défénitions</a>
<a href="sites.php" target="_self"><img src="img/menu/dot-g.png"/>Sites recommandés</a>
<a href="livres.php" target="_self"><img src="img/menu/dot-g.png"/>Livres recommandés</a>
<a href="ressources.php" target="_self"><img src="img/menu/dot-g.png"/>Ressources</a>
</div>
</div>
<!-- SECONDE DROPDOWN MENU END-->
<!-- OTHER DIRECT MENU LINK -->
<a href="recherche.php" title="Rechercher sur le site" target="_self"><img class="sans-texte" src="img/menu/recherche.png"/></a>
<a href="a-propos.php" title="À propos" target="_self"><img class="sans-texte" src="img/menu/a-propos-g.png"/></a>
<a href="contact.php" title="M'écrire" target="_self"><img class="sans-texte" src="img/menu/enveloppe-g.png"/></a>
<a href="https://www.facebook.com/renedemoors" title="Me joindre sur Facobook" target="_blank"><img class="sans-texte" src="img/partage/facebook-s.png"/></a>
<!-- OTHER DIRECT MENU LINK END -->
<!-- DIRECT LINK TO CHANGE LANGUAGE -->
<a href=" <?php
$url= $_SERVER['REQUEST_URI'];
$positionslash= strrpos($url, "/");
$filename= substr($url, $positionslash + 1);
echo "en/". $filename;
?> " title="english" target="_self"><span class="menu-lang">English</span></a>
<!-- DIRECT LINK TO CHANGE LANGUAGE END -->
<!-- OPEN / CLOSE MOBILE MENU -->
<a href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="img/menu/bars-g.png" alt="menu"/></a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<div class="menu-open"><img src="img/menu/bars-g.png" alt="menu"/>
</div>
<div class="menu-close"><img src="img/menu/times-r.png" alt="fermer"/>
</div>
</a>
<!-- OPEN / CLOSE MOBILE MENU END -->
</div>
<!-- MENU END -->
</div>
<!-- LOGO AND MENU WRAPP END -->
这是CSS代码
/* LOGO */
.logo {
display: block;
top: 0;
left: 0;
width: 100%;
margin: 0;
padding: 0 0 0 27px;
height: 73px;
background-color: black;
}
.logo a {
font-family: "Times New Roman", Times, serif;
font-weight: normal;
display: inline-block;
color: white;
font-style: italic;
font-size: 28px;
margin: 0;
padding: 18px 5px 25px 5px;
letter-spacing: -.5px;
box-shadow: 0 2px 0 lightgreen;
text-decoration: none;
padding-bottom: 3px;
}
/* color of the letters Veg of the logo */
.logo .logo-color {
color: lightgreen;
margin-right: 0;
}
.logo .logo-color-2 {
color: dimgray;
margin-right: 0;
}
/* LOGO END */
/* MENUM */
.menu-lang {
color: lightgreen;
font-size: 22px;
font-style: italic;
}
.menu-wrap.fixed {
position: fixed;
/*d'autres proprietes si besoin*/
}
.menu-wrap {
font-style: normal;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
z-index: 200;
height: 73px;
background-color: black;
}
.topnav {
position: absolute;
float: right;
display: inline-block;
top: 0;
right: 0;
margin: 0;
padding: 0 32px 0 0;
height: 73px;
background: black;
letter-spacing: -1.5px;
}
/* direct linksof the menu */
.topnav a {
color: white;
top: 0;
right: 0;
float: left;
display: inline-block;
text-align: center;
padding: 25px 10px 19px 10px;
text-decoration: none;
font-size: 21px;
}
/* menu icons */
.topnav img {
height: 14px;
width: auto;
margin: 0;
padding: 0 4px 0 1px;
text-decoration: none;
}
/* direct links icons */
img.sans-texte {
height: 22px;
width: auto;
margin: 0;
padding: 0 4px 0 1px;
text-decoration: none;
}
/* images icones dans le texte---------------------*/
img.sans-texte-2 {
height: 35px;
width: auto;
background: black;
margin: 0;
padding: 4px 4px;
text-decoration: none;
border-radius: 5px;
}
img.sans-texte-2:hover {
transform: translateY(-2px);
}
.topnav .icon {
position: absolute;
margin: 0;
padding: 0;
color: lightgreen;
display: none;
top: 0;
right: 0;
border: none;
}
/* DROPDOWN MENU */
/* left aligment of dropdown menu links */
.dropdown {
float: left;
overflow: hidden;
}
/* dropdown menu links */
.dropdown .dropbtn {
display: inline-block;
font-size: 21px;
border: none;
outline: none;
color: white;
padding: 28px 2px 20px 5px;
background-color: inherit;
font-family: inherit;
margin: 0;
top: 0;
}
/* dropdwon menu contant */
.dropdown-content {
display: none;
position: absolute;
background-color: black;
width: auto;
z-index: 1;
}
/* dropdown menu links */
.dropdown-content a {
float: none;
color: lightgreen;
font-size: 19px;
padding: 15px 35px 15px 15px;
text-decoration: none;
display: block;
text-align: left;
letter-spacing: normal;
}
/* bottom line of dropdown menu liks*/
.dropdown-content a {
border-top: 1px solid #4B4A4A;
}
/* hover on dropdwown menu links */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #2C2C2C;
color: white;
}
/* meme chose */
.dropdown-content a:hover {
background-color: #2C2C2C;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
/* MEDIA QUERY */
@media screen and (max-width: 1100px) {
/* ----- disparitoin du menu horizontal --- */
.topnav a, .dropdown .dropbtn {
display: none;
background: black;
z-index: 100;
}
/*show vertical menu open button */
.topnav a.icon {
position: absolute;
float: right;
display: block;
top: 0;
margin: 0;
right: 0;
padding: 26px 25px 16px 22px;
border: none;
}
/* hover / vertical menu close button */
.topnav a.icon:hover {
background: black;
border: none;
}
/* ----------- menu ----------------*/
/*every links with or without dropdown links*/
.topnav.responsive {
position: absolute;
background-color: black;
margin: 0;
padding: 0;
width: 100%;
z-index: 204;
letter-spacing: normal;
height: 100vh;
overflow: auto;
}
/* dropdown menu */
.topnav.responsive .icon {
position: absolute;
float: right;
display: block;
border: none;
outline: none;
width: 72px;
height: 72px;
}
/* dropdown menu */
.topnav.responsive a {
width: 100%;
float: none;
display: block;
text-align: left;
padding-left: 35px;
border-bottom: 1px solid #4B4A4A;
}
/* make the menu vertical */
.topnav.responsive .dropdown {
float: none;
}
/* dropdown menu */
.topnav.responsive .dropdown-content {
position: relative;
width: 100%;
margin: 0;
padding-left: 20px;
}
/* show dropdowm menu links*/
.topnav.responsive .dropdown .dropbtn {
display: block;
text-align: left;
width: 100%;
padding-left: 35px;
border-bottom: 1px solid #4B4A4A;
letter-spacing: normal;
}
}
/* show open button of the vertical menu*/
.topnav .menu-open {
display: block;
}
/* hide vertical menu close button */
.topnav .menu-close {
display: none;
}
/* hide vertical menu open button*/
.topnav.responsive .menu-open {
display: none;
}
/* vertical menu close button */
.topnav.responsive .menu-close {
position: absolute;
display: inline-block;
float: right;
top: 0;
right: 0;
margin: 0;
border: none;
outline: none;
padding: 26px 25px 16px 22px;
}
@media only screen and (max-width: 500px) {
.logo a {
font-size: 95%;
padding-bottom: 0px;
box-shadow: 0 1px 0 lightgreen;
}
}
答案 0 :(得分：0)
您仅添加鼠标悬停以在CSS中显示子菜单。使用jQuery单击菜单时，请在菜单项中添加“活动”类。
.dropdown.active .dropdown-content {
display:block;
}
答案 1 :(得分：0)
感谢Rayess，我在这里回答您的建议，因为在使用“添加注释”时我无法使代码看起来不错。
我唯一使用的其他js代码是
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
您的建议是否可行，我应该如何进行？
答案 2 :(得分：0)
我将此 display：block; 添加到下面的代码中。因此，现在，所有下拉菜单都保持打开状态更好，但是我希望我们可以通过点击其标题来打开和关闭它们。我不知道如何使用js。
/* dropdown menu */
.topnav.responsive .dropdown-content {
position: relative;
width: 100%;
margin: 0;
padding-left: 20px;
display:block; /* keep open all the dropdown menus*/
}