Fiz um menu e agora estou tentando estilizar um menu dropdown, mas não estou conseguindo falar com o a
da .dropdown-content
. Percebi que o .header-menu ul li a
está hierarquicamente acima da .dropdown-content a
, mas não descubro como mudar isso. Segue o código:
https://jsfiddle.net/zxvLwdjw/
Edit: Adicionei o código aqui e vou tentar ser mais específico
Não estou conseguindo falar com o a
da classe .dropdown-content
, como podem ver os estilos que coloquei nessa classe não estão funcionando, o a
não está com 60px
de altura, a cor do texto não é branca, o texto não está alinhado a esquerda...
Já tentei atribuir uma classe para o a
e não funcionou.
.header-menu {
height: auto;
text-align: right;
font-size: 0;
}
.header-menu ul li {
height: auto;
display: inline-block;
}
.header img {
margin-top: 20px;
}
.header-menu ul li a {
text-align: center;
color: #000;
font-size: 14px;
line-height: 60px;
padding: 20px 12px;
text-decoration: none;
}
.header-menu ul li:hover {
background: #fd1616; /*Vermelho*/
}
/*Dropdown Menu*/
.dropdown-content {
display: none;
position: absolute;
background: #111112;
width: 130px;
padding: 10px 0;
}
.dropdown-content a {
height: 60px;
color: #fff;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background: #fd1616;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav class="header-menu">
<ul>
<li><a href="ps4.html">PS4</a></li>
<li><a href="xboxone.html">XBOX ONE</a></li>
<li><a href="pc.html">PC</a></li>
<li class="dropdown">
<a href="outrosconsoles.html">Outros Consoles</a>
<div class="dropdown-content">
<a href="#">PS3</a>
<a href="#">XBOX 360</a>
<a href="#">WII U</a>
</div>
</li>
<li><a href="esports.html">eSports</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="videos.html">Vídeos</a></li>
</ul>
</nav>
.dropdown-content a
para.header-menu ul li .dropdown-content a
você consegue utilizar as propriedades. Ou você pode utilizar!important
nocolor
e notext-align
, apesar disso futuramente poder te trazer problemas