I recently followed a tutorial on "Overlapping Tabs" for a WordPress project and found it to be quite helpful and functional. The tutorial can be viewed at
After implementing the tabs from the tutorial, I decided to add dropdown submenus to enhance the functionality. Although the submenus work well, I encountered an issue where the background tabs from the main parent menu are spilling over into the submenu despite having a no-repeat setting in the CSS.
I've attempted various solutions, such as looking for demos and tweaking the CSS, but I seem to be making things more complicated. Here is a snippet of the CSS code that showcases the issue:
.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;
}
An image demonstrating the problem can be seen here: menu problem http://glassdoctordenvermetro.com/wp-content/themes/GDDenverTheme/images/menu_problem.jpg