2

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>

14
  • 1
    Ponha o trecho relevante do código na pergunta. Pode manter o link como complemento, claro, mas as perguntas não podem depender de conteúdo externo (e nem é legal as pessoas terem que ficar consultando coisa fora do site para ajudar). Aproveite ao editar para explicar melhor qual é o resultado que precisa, e não só como está tentando resolver.
    – Largato
    Commented 22/11/2016 às 16:13
  • 1
    @GabrielSouza Creio que se você mudar o CSS do .dropdown-content a para .header-menu ul li .dropdown-content a você consegue utilizar as propriedades. Ou você pode utilizar !important no color e no text-align, apesar disso futuramente poder te trazer problemas
    – Willian
    Commented 22/11/2016 às 16:54
  • 3
    Do jeito que tá indo, só falta alguém recomendar jQuery agora.
    – Largato
    Commented 22/11/2016 às 17:02
  • 1
    Já usou jQuery ? Commented 22/11/2016 às 17:04
  • 1
    @Willian poste como resposta, assim o Gabriel pode marcar como aceita e fechar o assunto
    – Largato
    Commented 22/11/2016 às 17:20

2 Respostas 2

1

Com o que você apresentou, você pode resolver o problema mudando o .dropdown-content para .header-menu ul li .dropdown-content, assim ele irá dar preferência para as configurações que deseja. Ou você pode utilizar o !important logo após definir os valores de colore text-align, porem utilizar ele pode futuramente te trazer problemas ao dar manutenção ao site.

Ele ficaria assim:

.header-menu ul li .dropdown-content a {
  color: #fff;
  display: block;
  text-align: left;
}
0

Olá, da forma que você esta referenciando os elementos no css dificulta a manutenção, eu recomendaria desenvolver classes para os elementos, peguei seu html e desenvolvi um exemplo:

*{
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.nav{
  background-color: #3498db;
  display: block;
}

.menu{
  list-style: none;
}

.menu-item, .menu-link{
  display: inline-block;
}

.menu-item:hover{
  background-color: #2980b9;
}

.menu-item:hover .sub-menu{
  display: block;
}

.menu-link{
  color: #fff;
  padding: 10px;
  position: relative;
  text-decoration: none;
}

.sub-menu{
  display: none;
  position: absolute;
  width: 200px;
}

.sub-link{
  background-color: #2980b9;
  border-top: 1px solid rgba(0,0,0,.1);
  color: #ecf0f1;
  display: block;
  padding: 10px 5px;
  text-decoration: none;
}
.sub-link:hover{
  border-left:3px solid #333;
  color: #333;
}
<nav class="nav">
  <ul class="menu">
    <li class="menu-item">
      <a href="ps4.html" class="menu-link">PS4</a>
    </li>
    <li class="menu-item">
      <a href="xboxone.html" class="menu-link">XBOX ONE</a>
    </li>
    <li class="menu-item">
      <a href="pc.html" class="menu-link">PC</a>
    </li>
    <li class="menu-item">
      <a href="outrosconsoles.html" class="menu-link">Outros Consoles</a>
      <div class="sub-menu">
        <a href="#" class="sub-link">PS3</a>
        <a href="#" class="sub-link">XBOX 360</a>
        <a href="#" class="sub-link">WII U</a>
      </div>
    </li>
  </ul>
</nav>

Repare nas novas classes que adicionei em seu html e como ficou mais fácil entender o que é oque.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .