周末一道有点奇葩的javascript的题目，求帮忙解决

Question

今天接到个题目，做个有点奇葩的菜单，折腾了一天没搞好，相关信息如下图显示：

一个多行的可折叠的2级菜单
使用jquery框架
寻求帮忙

Answer 1

<style>
  #menuCont li{
    width: 25%;
    float: left;
  }
    #menuCont li,
    #menuCont a
    {
      display: block;
      line-height: 50px;
      height: 50px;
      text-align: center;
    }

    #menuCont .subMenu{
      display: none;
      position: absolute;
      width: 100%;
      left: 0;
    }
    #menuCont li:hover a,
    #menuCont li:hover .subMenu
    {
      background-color: red;
    }
    #menuCont li:hover .subMenu{
      display: block;
    }
  </style>


<p id="menuCont" class="clearfix">
   <ul class="clearfix">
     <li>
       <a href="#">menu</a>
       <p class="subMenu">
         <ol class="clearfix">
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
         </ol>
       </p>
     </li>
     <li>
       <a href="#">menu</a>
       <p class="subMenu">
         <ol class="clearfix">
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
         </ol>
       </p>
     </li>
     <li>
       <a href="#">menu</a>
       <p class="subMenu">
         <ol class="clearfix">
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
         </ol>
       </p>
     </li>
     <li>
       <a href="#">menu</a>
       <p class="subMenu">
         <ol class="clearfix">
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
         </ol>
       </p>
     </li>
     <li>
       <a href="#">menu</a>
       <p class="subMenu">
         <ol class="clearfix">
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
         </ol>
       </p>
     </li>
     <li>
       <a href="#">menu</a>
       <p class="subMenu">
         <ol class="clearfix">
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
           <li><a href="#">sub</a></li>
         </ol>
       </p>
     </li>
   </ul>
 </p>

Answer 2

1. 列表默认固定高度，点击展开按钮时，给列表height: auto;，收起时反之。
2. 监听菜单项的mouseover事件，触发时子菜单定位过去；或者也可以直接使用css实现子菜单，看个人喜欢哪种方式。

Answer 3

没有人回答，给点思路也可以啊