首先，孩子没有工作里面：悬停

Question

的代码块不工作 - 这是我的代码示例：

Codepen example

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>

Answer 1

而不是first-child您可以使用first-of-type选择：

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>

Answer 2

试试这个&：悬停> ul {}可能会帮助你。

Answer 3

&:hover { 
    background: #f7f7f7; 
    // first ul 
    ul { 
      li:first-child { 
      background: green; 
      } 
     } 
     } 

难道不是这样吗？

Answer 4

如果sass被转换为css，你会做ul:first-child { background: green; }。 使它ul li:first-child { background: green; }它应该工作正常。