différent composant dropdownlist

Question

Je veux créer un composant comme ci-dessous:

Ce sera quelque chose comme dropdownlist. Je veux utiliser ce composant chaque cellule (td) des lignes de la table. Donc mon problème que de montrer la seconde div (liste des objets) sous la première div mais au-dessus des lignes de la table.

Pourriez-vous m'aider s'il vous plaît à propos de son css?

Answer 1

Tout d'abord, je voudrais que la div popout vole au-dessus plutôt qu'au-dessous. La raison en est qu'il sera automatiquement 'au-dessus' (en termes d'index z) des éléments ci-dessus afin qu'il ne soit pas masqué par des rangées de tables successives.

Deuxièmement, vous voulez avoir quelque chose comme ceci:

<div class="action"> 
    <div class="select"><!-- select box here --></div> 
    <div class="popout"><!-- stuff here --></div> 
</div> 

activer ensuite avec CSS comme ceci:

div.action { 
    width:75px; 
    height:30px; 
    position:relative; 
} 
div.select { 
    position:absolute; 
    top:0; 
    left:0; 
} 
div.popout { 
    position:absolute; 
    left:0; 
    bottom:30px; 
    width:300px; 
    display:none; /* it will be revealed on hover */ 
} 
div.action:hover div.popout { 
    display:block; 
} 

Pour faire ce travail dans les anciennes versions de IE, vous pouvez ajouter ce JavaScript à l'action div:

<div class="action" onmouseover=""this.className='action hover'" onmouseout="this.className='action'"> 

Ensuite, utilisez une classe de survol à la place de l'état:

div.hover div.popout { 
    display:block; 
} 

J'espère que c'est ce que vous vouliez dire! :)