I can’t talk with specific class in css

Asked

Viewed 158 times

2

I made a menu and now I’m trying to style a dropdown menu, but I’m not getting through to a of .dropdown-content. I realized that the .header-menu ul li a is hierarchically above .dropdown-content a, but I can’t figure out how to change that. Follow the code:

https://jsfiddle.net/zxvLwdjw/

Edit: I added the code here and I’ll try to be more specific

I’m having trouble talking to a class .dropdown-content, as you can see the styles I put in this class are not working, the a is not with 60px height, text color is not white, text is not left aligned...

I’ve tried assigning a class to the a and it didn’t work.

.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>

html css
  • 1

    Put the relevant portion of the code into the question. You can keep the link as an add-on, of course, but the questions can’t depend on external content (and it’s not even cool for people to have to look for things outside the site to help). Take the [Edit] to better explain what is the result you need, and not only how you are trying to solve.

  • Because you do not assign a class to <a tags> ?

  • I edited with code and more information. I’ve tried assigning a class to <a> and it didn’t work

  • @Gabrielsouza has improved a lot, but which of the The you speak?

  • @Gabrielsouza is with 60 px yes, only with padding. Put a padding:0 that is to solve. These things you see easy using the browser inspector.

  • 1

    @Gabrielsouza I believe that if you change the CSS of .dropdown-content a for .header-menu ul li .dropdown-content a you can use the properties. Or you can use !important in the color and in the text-align, although in the future I may bring you trouble

  • Have you ever heard of bootstrap?

  • 3

    The way you’re going, there’s only one person left to recommend jQuery now.

  • 1

    Have you ever used jQuery ?

  • Have you heard the word of our savior Angularjs?

  • @Gumball now no longer missing kkkk

  • Thanks William! Just putting the class . header-menu ul li in front already solved

  • 1

    @Willian posts as an answer, so Gabriel can mark as accepted and close the matter

  • @Gabrielsouza If you can mark the answer as accepted, I thank you

Show 9 more comments

2 answers

1


With what you presented, you can solve the problem by changing the .dropdown-content for .header-menu ul li .dropdown-content, so it will give preference to the settings you want. Or you can use the !important right after setting the values of colorand text-align, but using it may in the future cause you problems when maintaining the site.

He’d be like this: 

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

0

Hello, the way you are referencing the elements in css makes maintenance difficult, I would recommend developing classes for the elements, I took your html and developed an example: 

*{
  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>

Notice the new classes I added to your html and how it’s easier to understand what’s what.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.