DropDown Menu won't to display on hover

[Mattz93]

Hello guys I have this drop down menu:\[code\]<ul id="menu"><li class="dropDown"><a>DropDown</a> <div id="container"> <div class="col1"> <h3 class="has3">CheckOn</h3> <ul> <li><a href="http://stackoverflow.com/questions/12800919/#">Link1</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">Link2</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">Link3</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">Link4</a></li> </ul></div> <div class="col1"> <h3 class="has3">MasterLink</h3> <ul> <li><a href="http://stackoverflow.com/questions/12800919/#">Link5</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">Link6</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">Link7</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">Link8</a></li> </ul></div> <div class="col1"> <h3 class="has3">MasterLink</h3> <ul> <li><a href="http://stackoverflow.com/questions/12800919/#">link9</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">link10</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">link11</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">link12</a></li> </ul></div> <div class="col1"> <h3 class="has3">MasterLink</h3> <ul> <li><a href="http://stackoverflow.com/questions/12800919/#">link13</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">link14</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">link15</a></li> <li><a href="http://stackoverflow.com/questions/12800919/#">link16</a></li> </ul></div></div></li></ul>\[/code\]with this css:\[code\]#menu{background:#9c7d9e; padding:10px;}#container{ width: 550px; height: 150; border: 1px solid #c5a0b7; margin: 0 auto; display:none;}#mainContainer.dropDown:hover ul{ display: block;}.col1{float:left; margin:5px 20px 0px 20px; border-right:1px solid #eaeaea;}h3{width:50px;border-bottom:1px solid #ccc;margin-bottom:5px; }a{text-decoration:none;padding:5px 0;}\[/code\]Is not an ordinal menu because instead of hidden \[code\]ul\[/code\], I use a \[code\]div\[/code\] with other \[code\]divs\[/code\] inside that contain \[code\]uls\[/code\] but the behavior should be the same when cursor pass over main \[code\]li\[/code\] from menu should display container \[code\]div\[/code\]I dont want to change html structure because I need the menu to be designed exactly how it is.fiddle: http://jsfiddle.net/RwtHn/1410/