我创建了一个水平菜单，当您将鼠标悬停在某个项目上时，会出现一个下拉菜单。还行吧。但是，当您离开菜单项（使用下拉菜单）时，下拉菜单就会消失。我知道这是因为你不再悬停它，但我该如何解决这个问题？我想要下拉菜单位于其正下方，我还没有对下拉位置进行编程，但它无论如何都在按钮旁边，所以我不知道我该怎么做才能使其工作，谢谢。 注意：我们非常欢迎您发现的任何其他更正:)
我试过这个：
#nosotros:hover + #dropdown-nosotros, #dropdown-nosotros:hover {
display: block;
}
还有这个：
#dropdown-nosotros:hover + #dropdown-nosotros {
display: block;
}
我期望的是当有人想要单击下拉菜单内的按钮时保持下拉菜单打开。
HTML
<!DOCTYPE html>
<htlm>
<header>
<link href="styleprueba.css" rel="stylesheet">
</header>
<body>
<button class="main-menu-button" id="nosotros">Nosotros</button>
<div class="dropdown-menu" id="dropdown-nosotros">
<h2 class="dropdown-title">Nosotros</h2>
<button class="main-menu-second-button">Bienvenidos</button>
<button class="main-menu-second-button">Misión y Visión</button>
<button class="main-menu-second-button">Próximamente</button>
<img src="">
</div>
</body>
</htlm>
CSS
#nosotros {
position: fixed;
top: 7%;
right: 52%;
width: 10%;
background-color: blue;
}
.main-menu-button {
font-family: lorimer-no-2, sans-serif;
font-style: black;
font-size: 13px;
background-color: transparent;
color: white;
border: transparent;
}
.dropdown-menu {
background-color: whitesmoke;
color: blue;
}
.main-menu-second-button {
background-color: transparent;
color: black;
border-color: transparent;
}
.main-menu-second-button:hover {
color: aquamarine;
}
#nosotros + #dropdown-nosotros {
display: none;
}
#nosotros:hover + #dropdown-nosotros, #dropdown-nosotros:hover {
display: block;
}
#dropdown-nosotros:hover + #dropdown-nosotros {
display: block;
}
希望这会起作用：
<style>
#nosotros {
position: fixed;
top: 7%;
right: 52%;
width: 10%;
background-color: blue;
}
.main-menu-button {
font-family: lorimer-no-2, sans-serif;
font-style: black;
font-size: 13px;
background-color: transparent;
color: white;
border: transparent;
}
.dropdown-menu {
background-color: whitesmoke;
color: blue;
display: none; /* It will nitially hide the dropdown */
position: absolute;
top: 30px; /* This will adjust the top position according to your design */
right: 0; /* This will align the dropdown with the button */
width: 100%; /* This will make the dropdown full width kindly adjust according to your need */
}
.main-menu-second-button {
background-color: transparent;
color: black;
border-color: transparent;
}
.main-menu-second-button:hover {
color: aquamarine;
}
#nosotros:hover + .dropdown-menu,
.dropdown-menu:hover {
display: block;
}
</style>
<!DOCTYPE html>
<htlm>
<header>
<link href="styleprueba.css" rel="stylesheet">
</header>
<body>
<button class="main-menu-button" id="nosotros">Nosotros</button>
<div class="dropdown-menu" id="dropdown-nosotros">
<h2 class="dropdown-title">Nosotros</h2>
<button class="main-menu-second-button">Bienvenidos</button>
<button class="main-menu-second-button">Misión y Visión</button>
<button class="main-menu-second-button">Próximamente</button>
<img src="">
</div>
</body>
</htlm>