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

，它将保持相同的颜色

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

1 个答案: