Menu problem, escaping from a contained element

Can't escape from box of a contained container.

[trebor]

Hi, I'm a CSS newbie, so apologies if the explanation of my problem isn't clear.

Here is what I want to do:

On some of my product pages, I want to display a picture of the product with some buttons superimposed on it, which, when rolled over, pop up menus of options -- in other words, doing the good old-fashioned UL flyout menu.

The problem is that while the flyout menus work, they are clipped to the div that contains the div that contains them.

My logical structure is as follows:

<div that displays the package as its background>
 <div that displays the button as its background>
 <ul> <li's> </ul>
 </div>
</div>

The problem is that no matter what I seem to do, the UL can escape the box of the containing div (the button div) but not the package div. Here's the actual code... with crap that's leftover from various attempts to get this to work.

/* content, product information */
.package {
position: relative;
background-color: #777;
background-repeat: no-repeat;
background-position: top left;
overflow: hidden;
height: 285px;
width: 197px;
margin: 0 0 0 0;
border: 0;
padding: 0;
float: left;
clear: both;
}
/* definitions of the buttons and the hover lists inside it */
.button {
position: relative;
background-repeat: no-repeat;
background-position: top left;
float: right;
clear: both;
width: 42px;
height: 43px;
margin: 0 0 0 0;
border: 0;
padding: 0;
overflow: visible;
}
/* hover rules for the tables embedded in the tabs */
.button ul {
display: none;
}
.button:hover ul {
background:#013298;
display: block;
position: absolute;
left: 21px;
border: none;
overflow: visible;
white-space: nowrap;
clip: rect(0,500px,500px,0);
z-index: 1;
}
....
and here is how it is used
....
<div class="package" style="background-image: url(IMG/BBLJA_webres.jpg)">
<div class="button" style="background-image: url(Design/IMG/tinybutton.jpg)">
<ul>
<li>derf 1</li>
<li>derf derf</li>
<li>dork</li>
</ul>
</div>
<div class="button" style="background-image: url(Design/IMG/tinybutton.jpg)">
<ul>
<li>derf 1</li>
<li>derf derf</li>
<li>dork</li>
</ul>
</div>
<div class="button" style="background-image: url(Design/IMG/tinybutton.jpg)">
<ul>
<li>derf 1</li>
<li>derf derf</li>
<li>dork</li>
</ul>
</div>
</div>

I'm sure this is something obvious, but would appreciate having the obvious pointed out to me...

Thanks in advance,R

[SuzyUK]

Welcome trebor, to CSS that is ;)

sorry no time to explain but here's some code I think describes what you're after, notes in the code, and used with your HTML sample above

I like to start with the least amount of positioning involved and use margins wherever possible but you may need position relative if you need a z-index both ways are shown in comments.. see how it goes

.package {
background-color: #777;

height: 285px;
width: 197px;

/* optional depending on the rest of your layout */
/*
float: left;
clear: both;
*/
}

.button {
background: #dad;

/* position the buttons by floating over to the right of your image */
float: right;
clear: right;

width: 42px;
height: 43px;

margin: 20px 0 20px 0; /* adjust to suit vertical positioning and gaps between your buttons */
}

.button ul {
background: #013298;
padding: 0; margin: 0; list-style: none; /* zero all defaults and remove the bullets */

/* if you use this method of offsetting the ul, then you don't need the left margin below */
/*
position: relative;
left: 35px;
*/

/* if you use the margin method to offset left you will need to put a width on the ul */
margin: 5px 0 0 35px; /* adjusting margins will dictate any overlap required */
width: 200px; /* optional if you use position:relative */

display: none;
}

.button:hover ul {display: block;}

li {border: 1px solid #fff; color: #fff; /* for visual only */}

-hth Suzy

[edited by: SuzyUK at 12:09 pm (utc) on Jan. 30, 2008]

[trebor]

Thank you very much for the quick and helpful reply.

I was reading through it and immediately it helped me notice the mistake that I had made; if you look closely the enclosing <div> definition has:

overflow: hidden;

and this was what was causing the clipping. I removed that one line and my code worked more or less the way I wanted it to.

I am going to play with some of your other suggestions as they address other issues that I will need to work on but did not bring up in the original post.

best regards,R