不同的下拉列表组件

Question

我想创建一个如下组件：

它会像dropdownlist。我想在表行的每个单元格（td）中使用此组件。所以我的问题是在第一个div下面但在表行上方显示第二个div（项目列表）。

请你帮我解决它的问题？

Answer 1

首先，我会让popout div飞到上面而不是下面。这样做的原因是它会自动在上面（以z-index表示）上面的元素，因此它不会被连续的表行覆盖。

其次你会想要这样的东西：

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

然后用这样的CSS激活它：

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

要在旧版本的IE中使用此功能，您可以将此JavaScript添加到动作div：

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

然后使用一类悬停而不是状态：

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

我希望这就是你的意思！ ：）