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

我想制作下拉菜单。我已经用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>

探索

陈述
城市

不要像这样在#主菜单上使用鼠标悬停，而是在#主菜单上使用鼠标悬停

#主菜单：悬停#主{}

---

由于.drop和#main都在#main菜单中，因此如果将鼠标移动到.drop，它将保持相同的颜色

非常好的答案。如果有人想为引导执行此操作，请将鼠标悬停在.dropdown类（li）上，然后引用a标记，看起来是这样的：.dropdown:hover.dropdown toggle{your styles}