0

我正在尝试在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;
}
4

1 回答 1

1

超级简单:first-of-type的修复，只需删除

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

显然，您需要先添加其余的子菜单，然后这些子菜单才会起作用。

工作副本在这里

于 2013-07-05T15:03:29.250 回答