Magento News

 

Menu Drop Down Boxes Messed up in Internet Explorer

My navigation bar has a background image for the Level0 category.

Everything looks good in chrome, safari, and firefox.

However, in Internet Explorer the drop down menu which shows the subcategories in the ACTIVE category has the background image of the main catagory … when it should just have a generic grey color background.

Here is an example:

http://www.unitedstatesofvitamins.com/cart/contact-us.html

Put your mouse over the Contact Us tab in Internet Explorer.

You’ll see the background image of the white tab as the subcategory background.

Any ideas on how to fix this?

Here is my menu.css file:


#nav { padding:0 13px; font-size:1.1em; }

/************** ALL LEVELS  *************/ /* Style consistent throughout all nav levels */
#nav li { position:relative; text-align:left; }
#nav li.over { z-index:999; }
#nav a { background: url(../images/nav_menu_tab_passive.jpg) no-repeat 0 0 }
#nav a:hover { display:block; line-height:1.3em; text-decoration:none; }
#nav span { display:block; cursor:pointer; white-space:nowrap; }
#nav li ul span {white-space:normal; }

/************ 0 LEVEL  ***************/
#nav li { float: left; text-align:center; }
#nav li.active a {
    color:#333333;
    
    text-decoration:none;
}
#nav li.active a {
background: url(../images/nav_menu_tab_active.jpg) no-repeat 0 0;}

#nav li.active a:hover {
    color:#666666;
    text-decoration:none;
    
} 
#nav a {
    float:left;
    color:#CCCCCC;
    width:129px;
    padding-top: 6px;
    padding-right: 12px;
    padding-bottom: 2px;
    padding-left: 2px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    text-decoration:none;
}
#nav li.over a,
#nav a:hover {
    color:#99FF33;
    text-decoration:underline;
}

/************ 1ST LEVEL ************/

#nav ul.active li.level1 a { background: url(../images/nav_menu_tab_passive.jpg) no-repeat 0 0; 
}

#nav ul li {
    width:100%;
    float:none;
    margin:0;
    padding-bottom:1px;
    text-align:left;
    background-color: #333333;
    background-image: url(../images/nav_divider.gif);
    background-repeat: repeat-x;
    background-position: 0 100%;
    
}
#old-nav ul li {
    width:100%;
    float:none;
    margin:0;
    padding-bottom:1px;
    text-align:left;
    background-color: #333333;
    background-image: url(../images/nav_divider.gif);
    background-repeat: repeat-x;
    background-position: 0 100%;
}

#nav ul li.active { float:none; margin:0; padding-bottom:1px; background:url(../images/nav_divider.gif) repeat-x 0 100%; }
#nav ul li.over {
    float:none;
    background-color: #999999;
    background-image: url(../images/nav_divider.gif);
    background-repeat: repeat-x;
    background-position: 0 100%;
}
#nav ul li.last {
    padding-bottom:0;
    }

#nav ul a,
#nav ul a:hover { float:none; padding:0; color: #CCCCCC; }
#nav ul li a {
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #CCCCCC;
    font-weight:bold !important;
    font-size: 10px;
}

/************ 2ND LEVEL ************/
#nav ul { position:absolute; width:100%; top:25px; left:-10000px; border:1px solid #899ba5; }

/* Show menu */
#nav li.over > ul { left:0; }
#nav li.over > ul li.over > ul { left:100px; }
#nav li.over ul ul { left:-10000px; }

#nav ul li a { background:#ecf3f6;  width:100%; }
#nav ul li a:hover { background:#d5e4eb;  width:100%; }
#nav ul li a,
#nav ul li a:hover {
    padding-top:3px;
    padding-bottom:3px;
    color:#FFFFFF !important;
    background-color: #666666;
}
#nav ul span, #nav ul li.last li span { padding:3px 15px 4px 15px;}

/************ 3RD+ LEVEL ************/
#nav ul ul { top:5px; }

Menu Drop Down Boxes Messed up in Internet Explorer

Possibly Related Posts:


 

Leave a Reply