The color of button isn't changing

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!

i tried to put your code on a pen and the media button has black color font

1 Like


here “Media” is in a white color font

well thats very odd, i tried your code in the same compiler and its black for me :wink: and buttons also have border

It would be better if you put a link to a working playground like codepen, where we can see the problem simulated

sure thing

.dropdown button, .home {
  color: white;
}

this rule overrides it

In chrome you can inspect pages and see elements, what css rules they got and their order

1 Like

it worked. thank you very much, and thanks for the lifehack