html - 使用 CSS '+' 运算符更改显示值

Question

我正在尝试使用 CSS 创建一个下拉菜单，它以使用以下内容为中心：

#submenu_div {
  display: none;
}

#li_id:hover + #submenu_div {
  display: block;
}

编辑：

这是整个事情的固定HTML。

<ul id="main_nav">
  <a href=""><li id="li_id">Home</li></a>
  <ul id="sub_who">                                                                                                                                     
    <li>Foo</li>
  </ul>
</ul>

#submenu_div 位于前面代码所指的 li 所在的 ul 的父 div 之外。据我所知，这应该有效。但我显然做错了什么，有什么想法吗？

Answer 1

#submenu_div 位于前面代码所指的 li 所在的 ul 的父 div 之外。

+组合器只寻找一个真正的兄弟元素，即与.左侧匹配的元素具有相同父+元素的元素。你不能让它匹配其他任何东西。您将需要更改您的 HTML（因此它#submenu_div是 的真正兄弟#li_id）或您的 CSS（因此 LHS 上的东西+是 的真正兄弟#submenu_div）或两者兼而有之。

如果没有看到您的 HTML 结构，我无法给出更准确的建议。