Hover is not applied in child element [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 10 months ago.

Improve this question

I’m building a website with a dropdown menu for the "About Us" section, and I want the dropdown to appear on hover. However, the hover effect is not working. The dropdown does not appear when I hover over the "About Us" menu item.

HTML:

<div class="header_text">
    <ul>
        <li class="home"><a href="#">Home</a></li>
        <li class="aboutus">
            <a>About Us <i class="fas fa-caret-down"></i></a>
            <div class="aboutus_content">
                <a href="#">Party History</a>
                <a href="#">Party Guidance</a>
            </div>
        </li>
        <li class="whorwe"><a href="#">Who are we</a></li>
        <li class="programs"><a href="#">Programs</a></li>
    </ul>
</div>

SCSS:

.header_text {
    ul {
        display: flex;
        list-style: none;
        li {
            padding: 40px 15px;
            a {
                text-decoration: none;
                font-size: 23px;
                font-family: 'Varela Round';
                color: #5f3f00;
            }
            .aboutus {
                position: relative;
                &_content {
                    position: absolute;
                    top: 80px;
                    background-color: aqua;
                    display: none;
                    a {
                        display: block;
                    }
                }
                &:hover {
                    &_content {
                        display: block;
                    }
                }
            }
        }
    }
}

Seems like a bit of a misunderstanding on how the & works. See what this compiles to in plain CSS, you'll notice it doesn't turn into what you think it should and the selectors don't all match things. — asportnoy
– asportnoy, Commented Feb 11 at 17:29
i get it , it is not applied correctly in css wrong usage of & now i corrected with &:hover .aboutus_content { display: block; } and it works — Scoff Hunter
– Scoff Hunter, Commented Feb 11 at 19:17

Mahdi Zarei · Accepted Answer · 2025-02-12 10:02:28Z

This is because you wrote the SCSS in the wrong way.

This is the correct implementation:

.header_text {
  ul {
    display: flex;
    list-style: none;
    li {
      padding: 40px 15px;
      a {
        text-decoration: none;
        font-size: 23px;
        font-family: "Varela Round";
        color: #5f3f00;
      }
      &.aboutus {
        position: relative;
        .aboutus_content {
          position: absolute;
          top: 80px;
          background-color: aqua;
          display: none;
          a {
            display: block;
          }
        }
        &:hover {
          .aboutus_content {
            display: block;
          }
        }
      }
    }
  }
}

Let's break it down.

When you put .aboutus class inside the li block it will compile to li .aboutus which means a .aboutus class inside the li element. But here we want to referrence the li element with the .aboutus class so you need to add a & before the class so it will compile to li.aboutus which is what we need.

Collectives™ on Stack Overflow

Hover is not applied in child element [closed]

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related