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

cssjqueryz-order

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.

Best Answer

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>
Related Topic