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 

我想我必须使用 jquery 来解决问题 2，但我不知道该怎么做。

能否请您帮我解决以上问题。

这是我的完整代码:

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;
}

Answer 1

super 简单的修复，只需删除

中的 :first-of-type

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

显然，您需要先添加其余的子菜单，然后它们才能起作用。

工作副本 here