html - 第一个 child 不在 :hover 内工作

Question

<分区>

Answer 1

您可以使用first-of-type 选择器代替first-child:

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

请注意，> 选择器确保最近的后代 ul 仅作为目标 - 请参阅下面的演示和 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>