CODEWITHSUNDEEP
jquerycss
black_belt
black_belt

Reputation: 6799

Creating a menu like on Ebay.com

I am trying to create menu like on ebay.com . After taking help from various tutorials I have managed to develop a code for it. You can check it live here: http://cssdesk.com/8sBu5

But the problems with code are:

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

I guess I have to use jquery to solve the problem number 2, but I don't understand how to do it.

Could you please help me solve the above problems.

Here's my complete code:

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

Upvotes: 0

Views: 937

Answers (1)

Pat Lillis
Pat Lillis

Reputation: 1180

Super easy fix, just remove :first-of-type in 

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

Obviously you'll need to add the rest of the submenus before those will work.

Working copy here

Upvotes: 1

Related Questions