Erste-Kind nicht in Arbeit: schweben

Question

Dieser Codeblock funktioniert nicht - hier ist mein Codebeispiel:

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

Statt first-child können Sie first-of-type Selektor:

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

Beachten Sie, dass > Selektor stellt sicher, dass der nächste Nachkomme ul nur abgezielt wird - siehe Demo unten und 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

versuchen diese &: hover> ul {} kann Ihnen helfen.

Answer 3

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

Sollte es nicht so sein?

Answer 4

Sie tun ul:first-child { background: green; }, wenn Sass in css transpiliert wird. Machen Sie es und es sollte gut funktionieren.