为什么下拉菜单box-shadow写在ul li ul中不生效，在hover选择器下生效？

失效原因 #

你代码中border-radius: 5px末尾遗漏了CSS属性必须的结束分号，解析器会将相邻的下一行box-shadow属性和这一行拼接识别为一个无效属性，因此第56行的box-shadow不会生效，编辑器的语法高亮也会因为识别到语法异常将该行样式标为浅色。

同时你在nav ul li:hover ul选择器中单独写了同参数的box-shadow，该选择器优先级高于默认的nav ul li ul选择器，所以hover状态下的阴影效果可以正常展示，和你观察到的现象一致。

修正后的代码 #

nav ul li:hover ul{
  display: block;
  box-shadow: 2px 2px 5px purple;
}
nav ul li ul{
  margin-left: 3rem;
  position: absolute;
  z-index: 999;
  display: none;
  width: 10rem;
  text-align: left;
  background-color: hotpink;
  border-radius: 5px; /* 补充缺失的分号即可解决问题 */
  box-shadow: 2px 2px 5px purple;
}

内容的提问来源于stack exchange，提问作者Dany