jquery - Ebay.com のようなメニューを作成する

Question

ebay.comのようなメニューを作成しようとしています。さまざまなチュートリアルの助けを借りて、コードを開発することができました。ここでライブで確認できます: http://cssdesk.com/8sBu5

しかし、コードの問題は次のとおりです。

1. The dropdown menu does not look like the menu on ebay.com 

2. The dropdown only works for the very first parent menu (Fashion) because of 
   this code may be:

      .ulclass li:first-of-type:hover .ulsubmenu { 
            display:block;
        } 

3. I want to display only five items per column in the dropdown, but its showing 
   all items in one column 

問題番号2を解決するにはjqueryを使用する必要があると思いますが、その方法がわかりません。

上記の問題を解決する方法を教えてください。

これが私の完全なコードです：

HTML:

<ul class="ulclass">
  <li><a href="#">Fashion</a>

    <ul class="ulsubmenu">
    <li><a href="#">Men's</a></li>
    <li><a href="#">Women's</a></li>
    <li><a href="#">Books & Magazines</a></li>
    <li><a href="#">Cameras & Optics</a></li>
    <li><a href="#">Cars & Bikes</a></li>
    <li><a href="#">Charity</a></li>
    <li><a href="#">Clothing & Accessories</a></li>
    </ul>
 </li>

 <li><a href="#">Electronics</a>

    <ul class="ulsubmenu">
    <li><a href="#">Camera</a></li>
    <li><a href="#">Cellphones</a></li>
    <li><a href="#">Books & Magazines</a></li>
    <li><a href="#">Cameras & Optics</a></li>
    <li><a href="#">Cars & Bikes</a></li>
    <li><a href="#">Charity</a></li>
    <li><a href="#">Clothing & Accessories</a></li>
    </ul>
 </li>

 <li><a href="#">Home & Garden</a></li>
 <li><a href="#">Women's Clothing</a></li>
 <li><a href="#">Jwelary & Watches</a></li>
 <li><a href="#">Daily Deals</a></li>

</ul>  

CSS:

.ulclass
{
    background: none repeat scroll 0 0 #F7F7F7;
    border: 1px solid #CCCCCC;
    box-shadow: 0 -10px 16px #E7E7E7 inset;
    list-style: none outside none;   
    overflow: auto;


}

.ulclass li a
{
    color: #6A6A6A;
    line-height: 35px;
    text-decoration:none;
    padding: 0 17px;
}

.ulclass li a:hover
{
    text-decoration:underline;
}

.ulclass li:first-of-type:hover .ulsubmenu
{
    display:block;
}

.ulsubmenu
{ 
    display: none;
    position: absolute;
}


.ulsubmenu
{
    background: none repeat scroll 0 0 #F8F8F8;
    border: 1px solid #CCCCCC;
    box-shadow: 2px 2px #EAEAEA;
    display: none;
    list-style: none outside none;
    position: absolute;
    width: 668px;
    transition: all 0.9s ease-in-out;
}
.ulsubmenu li
{
    border: medium none;
    width: 222px;
}
.ulsubmenu li:last-of-type
{
    border: medium none !important;
}
.ulsubmenu li a
{
    font-family: arial !important;
    font-size: 12px;
    font-weight: normal !important;
}