Jquery 下拉菜单赢得'；t在悬停状态下显示

大家好，我有一个下拉菜单：

<ul id="menu">
<li class="dropDown"><a>DropDown</a>
   <div id="container">
       <div class="col1">
          <h3 class="has3">CheckOn</h3>
          <ul>
            <li><a href="#">Link1</a></li>
            <li><a href="#">Link2</a></li>
            <li><a href="#">Link3</a></li>
            <li><a href="#">Link4</a></li>
          </ul></div>
        <div class="col1">
         <h3 class="has3">MasterLink</h3>
        <ul>
            <li><a href="#">Link5</a></li>
            <li><a href="#">Link6</a></li>
            <li><a href="#">Link7</a></li>
            <li><a href="#">Link8</a></li>
        </ul></div>

    <div class="col1">
                    <h3 class="has3">MasterLink</h3>
        <ul>
            <li><a href="#">link9</a></li>
            <li><a href="#">link10</a></li>
            <li><a href="#">link11</a></li>
            <li><a href="#">link12</a></li>
        </ul></div>

    <div class="col1">
                    <h3 class="has3">MasterLink</h3>
        <ul>
            <li><a href="#">link13</a></li>
            <li><a href="#">link14</a></li>
            <li><a href="#">link15</a></li>
            <li><a href="#">link16</a></li>
        </ul></div>
</div>
</li>
</ul>

不是顺序菜单，因为不是隐藏的

ul

，而是将

div

与包含

uls

的其他

div

一起使用，但当光标经过main

li

时，行为应该相同，from菜单应显示container

div

我不想改变html结构，因为我需要菜单的设计完全符合它的原样

---

fiddle:

您必须将

#容器更改为block

您在：hover之后寻址了错误的元素。

在一个li中使用div是不可取的。
用div替换.col1

请添加一条注释。如果您为此提供了JSFIDLE，这将是一件好事。接下来，您应该添加一条新注释，以获得所有分数。谢谢你。这就是你想要的吗？但是为什么背景菜单ul用container div扩展呢|为什么后台菜单ul使用container div展开？：|因为你所展示的（#容器）就在这个元素的内部，实际上不是。但正如user1141356所说，position:absolute将解决这个问题。为什么后台菜单ul使用container div进行扩展|
#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;
}