我對(duì)這個(gè)代碼有疑問(wèn)

.podmenu {
    display: flex;
    flex-direction: column;
    list-style: none;
    width: 10rem;
    margin-left: 3rem;
    margin-bottom: 60px;

}

.verze {
    list-style: none;
    flex-direction: column;
    display: none;
    margin-top: 1rem;
    transition: 2s;
    margin-left: -2.94rem;
}

.podmenu:hover {
    .verze {
        display: flex;
    }
}

<ul class="podmenu">
  <li class="n">Verze</li>
  <li>
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
  </ul>
</li>
</ul>

它壞了是因?yàn)槟愕拇a無(wú)效。您不能像這樣嵌套CSS選擇器:

.podmenu:hover {
    .verze {
        display: flex;
    }
}

你必須這樣寫(xiě):

.podmenu:hover .verze {
    display: flex;
}

現(xiàn)在試試下面的例子:

.podmenu {
  display: flex;
  flex-direction: column;
  list-style: none;
  width: 10rem;
  margin-left: 3rem;
  margin-bottom: 60px;
}

.verze {
  list-style: none;
  flex-direction: column;
  display: none;
  margin-top: 1rem;
  transition: 2s;
  margin-left: -2.94rem;
}

.podmenu:hover .verze {
  display: flex;
}

<ul class="podmenu">
  <li class="n">Verze</li>
  <li>
    <ul class="verze">
      <li class="wind"><a href="windows1.html">Windows 1.0</a></li>
      <li class="wind"><a href="windows2.html">Windows 2.0</a></li>
      <li class="wind"> <a href="windows3.html">Windows 3.0</a></li>
      <li class="wind"><a href="windows95.html">Windows 95</a></li>
      <li class="wind"><a href="windows98.html">Windows 98</a></li>
      <li class="wind"><a href="windowsn.html">Windows NT</a></li>
      <li class="wind"><a href="windows20.html">Windows 2000</a></li>
      <li class="wind"><a href="windowsx.html">Windows XP</a></li>
      <li class="wind"><a href="windowsv.html">Windows Vista</a></li>
      <li class="wind"> <a href="windows7.html">Windows 7 </a></li>
    </ul>
  </li>
</ul>

問(wèn)題是您嵌套了CSS選擇器，這在過(guò)去20多年的大多數(shù)瀏覽器中是無(wú)效的語(yǔ)法，會(huì)導(dǎo)致CSS解析器中止并忽略樣式規(guī)則的其余部分。嵌套選擇器是像薩斯/SCSS這樣的CSS預(yù)處理程序的一個(gè)特性，但是它們的工作方式是將嵌套轉(zhuǎn)換成一個(gè)簡(jiǎn)單的樣式規(guī)則序列。

然而，有一個(gè)新的規(guī)范增加了在CSS中本地嵌套選擇器的能力，大多數(shù)瀏覽器供應(yīng)商已經(jīng)同意實(shí)現(xiàn)這一點(diǎn)。Chromium是第一個(gè)在版本112中添加CSS嵌套支持的瀏覽器引擎。Safar i在16.5版本中增加了對(duì)CSS嵌套的支持。至于Firefox，在我寫(xiě)這篇文章的時(shí)候，他們還在開(kāi)發(fā)中。這就是為什么嵌套語(yǔ)法目前在Chromium中有效，但在Firefox中無(wú)效。

注意:原生CSS嵌套不完全等同于薩斯/SCSS嵌套；有一些細(xì)微的語(yǔ)法和語(yǔ)義差異，您可以在規(guī)范中了解更多。

要使你的CSS當(dāng)前支持包括Firefox在內(nèi)的所有瀏覽器，你需要像這樣展平嵌套:

.podmenu:hover .verze {
    display: flex;
}