Другой компонент выпадающего списка

Question

Я хочу создать компонент, как показано ниже:

Это будет что-то вроде выпадающего списка. Я хочу использовать этот компонент в каждой ячейке (td) строк таблицы. Поэтому моя проблема в том, чтобы показать второй div (список элементов) под первым div, но над строками таблицы.

Не могли бы вы помочь мне с его css?

Answer 1

Во-первых, я бы хотел, чтобы всплывающее окно делалось вверху, а не внизу. Причина этого в том, что он автоматически будет «выше» (в терминах 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'">

Затем используйте класс hover вместо состояния:

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

Надеюсь, ты это имел в виду! :)