CSS, z-order, & a jQuery mini-menu

Question

I am trying to implement a very simple little dropdown-style mini-menu that will appear when a website user hovers over an image. The image is a link to download something and the mini-menu will give them a choice of format (flat file vs. chart).

The markup:

   <style>
      ol, ul
      {
         list-style: none;
      }
      .down-list
      {
         position:relative;
         left:0px;
         top:0px;
         z-index:2;
      }
   </style>

   ...

   <td>
     <div class="extraDownloadMenu"><img src="/AppName/Images/Icons/Download_15.gif" />
     <ul class="down-list" style="display:none;">
        <li>Data file</li>
        <li>Chart</li>
     </ul></div>
   </td>

The javascript:

   <script language="javascript" type="text/javascript">

      $(document).ready(function() {
         $('.extraDownloadMenu').hover(
            function() {
               $('.down-list', this).slideDown(100);
            },
            function() {
               $('.down-list', this).slideUp(100);
            });
      });

   </script>

So the menu appears - no problem. The problem is that the table cell is quite small and it grows to accomodate the additional content when the <ul> gets shown, which of course looks terrible and isn't what I want. What I want is for the content to smoothly appear on top of whatever content is there.

What is the CSS magic to make this occur?

Many thanks.

Answer 1

Set the position of the dropdown to absolute and add a wrapping container with a position of relative. Like:

<style>
    ol, ul {
     list-style: none;
    }
    .down-list {
     position:absolute;
     left:0px;
     top:0px;
     z-index:2;
    }
    .down-list-wrapper {
     position:relative;
    }
</style>

...

<td>
    <div class="extraDownloadMenu"><img src="/AppName/Images/Icons/Download_15.gif" />
     <div class="down-list-wrapper">
         <ul class="down-list" style="display:none;">
            <li>Data file</li>
            <li>Chart</li>
         </ul>
     </div>
    </div>
</td>

Answer 2

Hi Paul. The best way to avoid your container growing to accommodate your popup, is to use absolute positioning instead of relative:

.down-list
{
    position:absolute;
    left:0px;
    top:0px;
    z-index:2;
}

Now, the down side of this is that the list likely isn't going to popup where you want it. But that's okay, we can use jQuery to help us position it each time it's shown. Something like (untested):

  $(document).ready(function() {
     $('.extraDownloadMenu').hover(
        downloadMenu = $(this);
        function() {
           $('.down-list', this)
               .css({left: downloadMenu.offset().left, top: downloadMenu.offset().top + $(this).height()})
               .slideDown(100);
        },
        function() {
           $('.down-list', this).slideUp(100);
        });
  });