CSS, z-order, et un mini-menu jQuery

Question

J'essaie d'implémenter un petit mini-menu déroulant très simple qui apparaîtra lorsqu'un utilisateur du site survole une image. L'image est un lien pour télécharger quelque chose et le mini-menu leur donnera un choix de format (fichier plat contre graphique).

Le balisage:

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

Le 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> 

Ainsi, le menu apparaît - aucun problème. Le problème est que la cellule du tableau est assez petite et qu'elle se développe pour accommoder le contenu additionnel quand le <ul> est montré, ce qui bien sûr semble terrible et n'est pas ce que je veux. Ce que je veux, c'est que le contenu apparaisse au-dessus de tout ce qui est contenu.

Quelle est la magie CSS pour que cela se produise?

Merci beaucoup.

Answer 1

Définissez la position de la liste déroulante sur absolue et ajoutez un conteneur d'emballage avec une position relative. Comme:

<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

La meilleure façon d'éviter votre conteneur de plus en plus pour répondre à votre pop-up, est d'utiliser le positionnement absolu au lieu de parent:

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

Maintenant, le bas côté est que la liste probable ne va pas apparaître là où vous le voulez. Mais ça va, nous pouvons utiliser jQuery pour nous aider à le positionner chaque fois qu'il est montré. Quelque chose comme (non testé):

$(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); 
     }); 
    });