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

时间:2014-06-08 04:43:18

标签: html css

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

1 个答案:

答案 0 :(得分:1)

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

由于.drop和#main都在#mainmenu中,如果将鼠标移动到.drop

,它将保持相同的颜色