How do I select the tag for links within this part of the site

Web Development
1

Here is the current css

image
image1512Ɨ870 82 KB

The menu has items which underline the link but I do not want the links underlined in the menu like the rest of the links on the site.

I would like to target those links since they have the < a > in html

Can I do something like

.dropdown-content a {
text-decoration: none;
}

2

Hi there!

Welcome to the forums!

You could target the anchor tags with that, yes. However, you could place a class like menu-item on each anchor tag and then target them with .menu-item. (I find this easier for readability)

But at the end of the day, it is your decision! Whatever you find to be the easiest is what is best. :slight_smile:

2 Likes
3

image
image1168Ɨ520 75.1 KB

This is the html code, the div already has the class but should I apply the class to every href or will that automatically apple since the < a > is selected I am not understanding this lesson in codecademy and I am using a real world project to learn these concepts.

4

image

How do I make it so a menu item does not go on two lines, here is the css code for this

.dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 0px 0px rgba(0,0,0,0.2); padding: 12px 16px; z-index: 1; text-align: left; text-decoration: none; } .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropdown-content a { display: block; text-decoration: none; }
5

Iā€™m not quite sure where you are in the lessons, but the HTML would be written a little differently for a dropdown list in what I assume is the header/navigation. It would look like this:

<header>
  <nav>
    <ul class="main-menu">
      <li>
        <button class="main-menu__item">About</button>
        <div>
          <ul>
            <li>
              <a href="" class="main-menu__sub-item">F.A.Q.</a>
            </li>
            <li>
              <a href="" class="main-menu__sub-item">Core Principles</a>
            </li>
            <li>
              <a href="" class="main-menu__sub-item">Press</a>
            </li>
          </ul>
        </div>
      </li>
      <li>
        <button class="main-menu__item">Get Involved</button>
        <div>
          <ul>
            <li>
              <a href="" class="main-menu__sub-item">Action Kit</a>
            </li>
            <li>
              <a href="" class="main-menu__sub-item">Take the Pledge!</a>
            </li>
            <li>
              <a href="" class="main-menu__sub-item">Events</a>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</header>

Navigation menus can become complicated, so it can be easier to track styles when applied directly to a class rather than nested descendant selectors. Notice that I have the same class on each anchor tag; which is required when applying the same style to several elements.

To reference your second question, I am not getting the same break when I copy your HTML and CSS. Is that all of the code you provided? Or is there more?

To share code as I did above, include it between a block of three backticks.

```
code here
```