Question

I’m trying to create a dropdown menu using CSS, it’s centered around using the following:

#submenu_div {
  display: none;
}

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

EDIT:

Here’s the fixed HTML for the entire thing.

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

The #submenu_div is outside the parent div for the ul in which the li the previous code refers to resides. As far as I know, this should work. But I’m obviously doing something wrong, any ideas?

Answer 1

The #submenu_div is outside the parent div for the ul in which the li the previous code refers to resides.

The + combinator looks only for a true sibling element, i.e. an element with the same parent as whatever matched the left-hand side of the +. You cannot make it match anything else. You will need to change either your HTML (so that #submenu_div is a true sibling of #li_id) or your CSS (so the thing on the LHS of the + is a true sibling of #submenu_div) or both.

Without seeing the structure of your HTML I cannot give more precise advice.