1

This block of code not working - here is my code example:

Codepen example

this block of code not working

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul a {
  color: #333333;
  text-decoration: none !important;
  display: block;
  font-size: 16px;
  padding: 10px 15px;
}
ul li {
  position: relative;
  display: inline-block;
}
ul li:hover {
  background: #f7f7f7;
}
ul li:hover ul:first-child {
  background: green;
}
ul li ul {
  position: absolute;
  min-width: 150px;
  top: 100%;
  left: 0;
  background: #f7f7f7;
  padding: 10px 0;
}
ul li ul li {
  display: block;
}
ul li ul li ul {
  top: -10px;
  left: 100%;
}
<ul>
  <li>
    <a href="{{ server.URI }}products/">{{ langs.Products }}Menu</a>
    <ul>
      <li>
        <a href="">menu</a>
        <ul>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
            <ul>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="{{ server.URI }}services/">{{ langs.Services }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}news/">{{ langs.News }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}about/">{{ langs.About }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}contact/">{{ langs.Contact }}</a>
  </li>
</ul>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
Val Do
  • 2,695
  • 4
  • 20
  • 35

4 Answers4

1

Instead of first-child you can use first-of-type selector:

 ul li:hover > ul:first-of-type

Note that > selector ensures that the nearest descendent ul is only targetted - see demo below and updated codepen:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul a {
  color: #333333;
  text-decoration: none !important;
  display: block;
  font-size: 16px;
  padding: 10px 15px;
}
ul li {
  position: relative;
  display: inline-block;
}
ul li:hover {
  background: #f7f7f7;
}
ul li:hover > ul:first-of-type {
  background: green;
}
ul li ul {
  position: absolute;
  min-width: 150px;
  top: 100%;
  left: 0;
  background: #f7f7f7;
  padding: 10px 0;
}
ul li ul li {
  display: block;
}
ul li ul li ul {
  top: -10px;
  left: 100%;
}
<ul>
  <li>
    <a href="{{ server.URI }}products/">{{ langs.Products }}Menu</a>
    <ul>
      <li>
        <a href="">menu</a>
        <ul>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
          </li>
          <li>
            <a href="">menu</a>
            <ul>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
              <li>
                <a href="">menu</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="{{ server.URI }}services/">{{ langs.Services }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}news/">{{ langs.News }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}about/">{{ langs.About }}</a>
  </li>
  <li>
    <a href="{{ server.URI }}contact/">{{ langs.Contact }}</a>
  </li>
</ul>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
0

Try this one &:hover>ul {} may be it will help you.

Maulik
  • 765
  • 3
  • 14
0
&:hover {
   background: #f7f7f7;
    // first ul
     ul {
           li:first-child {
           background: green;
          }
        }
      }

Shouldn't it be like this?

Srichandradeep C
  • 387
  • 2
  • 13
0

You do ul:first-child { background: green; } if sass is transpiled into css. Make it ul li:first-child { background: green; } and it should work fine.

Andrey_Pov
  • 131
  • 6