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

超级简便的修复，只需删除

中的:first-of-type即可

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

显然，在这些子菜单工作之前，你需要添加其余的子菜单。

工作副本here

在Ebay.com上创建菜单

1 个答案: