So, basically it is a menu, with some animations. Basically all text is black , but the “Media” and “i” button are staying white , and I don’t know why.
My html snippet:
<div class="dropdown" id="myDIV1" >
<button><a href="main.html" class="home" target="_blank"><div class="bt1 ">Home</div></a></button>
<button><a href="php.html" class="home" target="_blank"><div class="bt1 active1">PHP</div></a></button>
<button><a href="practică.html" class="home" target="_blank"><div class="bt1">Practică</div></a></button>
<div class="products">
<button class="bi">Media <i class="fa fa-caret-down"></i></button>
<ul>
<li><a href="video.html" target="_blank">Video</a></li>
<li><a href="imagini.html" target="_blank">Imagini</a></li>
</ul>
</div>
<button><a href="formular.html" class="home" target="_blank"><div class="bt1">Formular</div></a></button>
<button><a href="pagpers.html" class="home" target="_blank"><div class="bt1">Pagină personalizată</div></a></button>
<div class="inf">
<button class="bi"><i class="fa fa-info"></i></button>
<ul>
<li ><p>Această pagină conține informație despre limbajul de programare PHP</p></li>
</ul>
</div>
</div>
</nav>
And the CSS:
.bt1 {
display: inline-block;
position: relative;
text-align: center;
padding:10px 15px;
margin: 30px 25px;
transition: 0.5s;
}
.bt1 {
color: black; /*that's what isn't working*/
}
.bt1:hover{
cursor:pointer;
}
.active1 ,.bt1:hover{
background-color:#44518c;
cursor:pointer;
border-radius: 10px;
color: #f1f0ee;
}
.bi {
display: inline-block;
position: relative;
text-align: center;
padding:10px 15px;
transition: 0.5s;
}
.bi {
color: black;
}
.bi:hover{
cursor:pointer;
}
.bi:hover{
background-color: #44518c;
cursor:pointer;
border-radius: 10px;
color: #f1f0ee;
}
Thanks!