CSS下拉菜单中ul li ul:hover选择器的作用与正确性问询

关于ul li ul:hover选择器的作用 #

你删除该选择器后功能完全正常是符合预期的，这个选择器在当前代码结构和现代浏览器环境下属于冗余的容错写法，实际不会额外生效。
原因很简单：下拉菜单<ul class="dropdown">是父级<li>的直接子元素，当你把鼠标移到下拉菜单上时，鼠标仍然处于父<li>的元素范围内，父<li>的:hover状态会持续触发，仅靠ul li:hover > ul就足够维持下拉菜单的显示状态。
原作者添加这个选择器主要是两个历史考量：

• 兼容早期旧版本浏览器的:hover触发bug，部分非常老旧的浏览器在鼠标移入子元素时，可能会意外丢失父元素的:hover状态，加这个选择器相当于双保险，保证鼠标放在下拉菜单上时菜单不会意外消失
• 预留容错空间，避免后续调整下拉菜单位置（比如增加margin、偏移量导致和父li之间出现小间隙）时，菜单意外关闭的概率

下拉菜单的正确选择器写法 #

现代浏览器环境下，只需要保留父触发元素:hover > 下拉菜单这一个选择器即可，对应你的代码就是ul li:hover > ul，完全可以删掉冗余的ul li ul:hover。
如果要兼顾键盘操作的可访问性，还可以补充focus-within触发逻辑：

ul li:hover > ul,
ul li:focus-within > ul {
  visibility: visible;
  opacity: 1;
  display: block;
}

这种写法已经覆盖了所有主流浏览器的使用场景，也符合可访问性规范。

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