html - 如何在主选项卡上保持效果，当鼠标悬停在下拉菜单上时，与主选项卡上的悬停效果相同？

Question

我想制作下拉菜单。我已经用 html/css 编写了一个代码，但是当我将鼠标悬停在下拉菜单上时，主选项卡上的效果会发生变化。我希望主选项卡看起来应该与悬停时相同，同时悬停在下拉菜单上。请解决我的问题!

下面是我的 CSS 代码:-

#main {
margin: auto;
height: 100%;
width: 100%;
border-right: solid 1px black;
float: left;
text-align: center;
font-size: 30;
color: #E17D10;
}

#main:hover {
background: -webkit-linear-gradient(top, #2E8D3B, #39B54A);
color: black;
}

.drop {
position: absolute;
margin: auto;
visibility: hidden;
background: white;
width: 33.3%;
top: 100%;
}

#main:hover+.drop, .drop:hover {
position: absolute;
margin: auto;
visibility: visible;
background: white;
width: 33.3%;
top: 100%;
background: white;
color: black;
font-size: 20;
}

下面是我的html代码:-

<div id="mainmenu">
<div id="main">
Explore
</div>
<nav class="drop">
<li><a href="">Country</a></li>
<li>State</li>
<li>City</li>
</nav>
</div>

Answer 1

而不是在#main 上使用悬停，而是像这样在#mainmenu 上使用它 #mainmenu:hover #main {}

因为 .drop 和 #main 都在 #mainmenu 中，所以如果您将鼠标移到 .drop 上，它会保持相同的颜色