Question

I followed this tutorial called “Overlapping Tabs” to use for a WordPress build. It’s really nice and works well. http://www.codealamode.net/overlapping-tabs

However, unlike the tutorial, I’ve now added dropdown submenus. They work great too except for some reason the main parent background tabs are carrying over into the submenu even though there is a no-repeat in the css.

I’ve looked for demos and tried switching things out in the css but I’m making a mess of things.

Here is the CSS. I do not want the submenu to have a background image like the main parent does. The CSS is tricky to make the tabs have endcaps and background image which “expands” in width to accommodate for length of link name.

Code: (this is not all of it but enough to show where the background image is and shows submenu too)

.menu ul {
list-style: none;
position: relative;
float: right;
}

.menu ul li {
float: left;
background: url(../wp-content/uploads/2012/08/inactive_right.png) no-repeat right;
padding: 11px 54px 12px 0;
}

.menu ul li:hover > ul {
display: block;
}

.menu ul li a:hover {
color: red;
}

.menu ul ul {
display: none;
position: absolute;
z-index:999; 
background-color: white;
white-space: nowrap;
}

.menu ul li:last-child ul {
right:0;
}

.menu ul ul li {
clear: both;
padding: 5px;
}

.menu ul ul li a:hover {
color: blue;
}

Image of the problem – see how the endcaps are in the submenu too? I’ve tried everything and not sure why it’s showing there when it is specifically tied to the Ul li… not the ul ul li.

menu problem http://glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/menu_problem.jpg

Answer 1

You’re setting the background to all the list-items inside .menu (.menu ul li). Since your sub menu is using list-items and is inside .menu, the style is applied too. Use the direct-child selector to catch the first-level only.

.menu > ul > li {
    ...
}