Showing Div via CSS selector within a UL

Question

I want to build CSS drop down menus.

I want to solve the problem of too long drop down items in UL. So I want to use DIV within a UL.

If you run this example, heading 3 will show you drop down UL items. I want the same for Heading 2 link. Because I put that UL in a DIV. So how can I do it?

CSS Code:

li{
    list-style: none;
    float: left;    
}

li ul {
    display: none;
    background-color: #69f;
}

li:hover > div#mDiv {
    display: block;
}

.menuDiv{
    display: none;
}

li:hover > ul {
    display: block;
}

Markup:

<ul>
  <li><a href="#">Heading 1</a></li>
  <li><a href="#">Heading 2</a>
    <div class = "menuDiv" id = "mDiv">
        <ul>
          <li><a href="#">Subitem 1</a></li>
          <li><a href="#">Subitem 2</a></li>
          <li><a href="#">Subitem 3</a></li>
        </ul>
    </div>
  </li>
  <li><a href="#">Heading 3</a>
    <ul>
      <li><a href="#">Subitem 4</a></li>
      <li><a href="#">Subitem 5</a></li>
      <li><a href="#">Subitem 6</a></li>
    </ul>
  </li>
  </ul>

Answer 1

Get rid of the > combinator so the inner ul s get picked up whether they're in a containing div or not:

li:hover ul {
    display: block;
}

Answer 2

If the > in your rules is required change this rule:

li:hover > div ul, li:hover > ul {
display: block;

}

Answer 3

Your problem is that because of your css, the div is shown on :hover , but the inner ul is not.

So you can use @BoltClock's solution or change:

li ul {
    display: none;
    background-color: #69f;
}

to:

li ul {
    background-color: #69f;
}
li > ul {
    display: none;
}