HA! I had one of these today. The short story: create a parent container, or, assign to the parent container position: relative, then absolutely position/z-index the internal elements inside that container. Then make sure your
document and CSS validate [validator.w3.org] or it's likely it may fail.
The long story: Visualize a menu like this:
home / products / blah / bleah / contact
See the slashes? The design has slanted lines, just like that, so how does one do mouseovers with full background color fills with this? Navs have to fit in square boxes, so for any given mouseover, it must
occupy part of the space next to it. It's similar to your problem. As we all know, it's impossible for two masses to occupy the same space, even on the Internet. :-)
The solution was surprisingly simple.
Absolute positioning doesn't mean your entire layout needs to be absolutely positioned. What I did was start with a floated div (floated, only due to other elements in the surrounding layout : )
#nav-container { float: left; width: 700px; height: 50px;
position:relative; }
The key here being the position: the absolute elements inside it will now position relative to this parent container.
Next comes a little bit of graphic wizardry to pull off this sleight of hand. The graphics have transparent edges, with a single image for non- mouseover and mouseover states. Important that the edges are transparent, I used .png to avoid sharp edges.
this is transparent to here ->/MOUSOVER/<-- also transparent outside angle
Stack them in a single image with non-mouseover state on top, mouseover state on bottom, exactly twice the height of the containing <a>.
NORMAL
------
MOUSEOVER
Then, for each of the internal elements, I absolutely positioned them relative to the parent. A sample thrown together:
#nav-container ul,
#nav-container li,
#nav-container li a { margin:0; padding:0; list-style:none; outline:none; height: 50px; }
#nav-container li,
#nav-container li a { width: 100px; display: block; }
#nav-container li { position: absolute; }
#first-nav { left: 0; z-index: 1000; } /*left not needed really */
#second-nav { left: 95px; z-index: 1005; }
#third-nav { left: 190px; z-index: 1010; }
#fourth-nav { left: 285px; z-index: 1015; }
#first-nav a { background: url(img-1.jpg) top left no-repeat; }
#second-nav a { background: url(img-2.jpg) top left no-repeat; }
#third-nav a { background: url(img-3.jpg) top left no-repeat; }
#fourth-nav a { background: url(img-4.jpg) top left no-repeat; }
#first-nav a: hover, #second-nav a: hover, #third-nav a: hover,
#fourth-nav a: hover { background-position:bottom left; }
And the HTML something like
<div id="nav-container">
<ul>
<li id="first-nav"><a href="">I am the</a></li>
<li id="second-nav"><a href="">Egg Man</a></li>
<li id="third-nav"><a href="">Coo Coo</a></li>
<li id="fourth-nav"><a href="">Ca Choo</a></li>
</ul>
</div>
Behind all, a single nav bar hides and aberrations of the overall effect. Note how each nav is 5px less than it's predecessor to the left, creating an overlapping tile . . . and it works. :-)
Note: Had the navs all been the same width as in the above sample, there are other things I could have done, but they weren't.
