使用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位于ul的父div之外，其中前面的代码所引用的li位于其中。据我所知，这应该有效。但我显然做错了什么想法？

Answer 1

  

#submenu_div位于ul的父div之外，其中前面的代码所引用的是li。

+组合子只查找 以获取真正的同胞元素，即与相同的父的元素与{匹配左侧{ {1}}。你不能让它与其他任何东西相匹配。您需要更改HTML（以便+是#submenu_div的真正兄弟）或您的CSS（因此#li_id的LHS上的内容是{的真正兄弟{ {1}}）或两者兼而有之。

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