Посоветуйте решение...
 

Добрый вечер.
Посоветуйте, пожалуйста, на что опираться и какие источники использовать при решении следующей проблемы:
разметка такая:

<div class="scroll">
  <div class="over"><div class="hint"></div></div>
  <div class="over"><div class="hint"></div></div>
  <div class="over"><div class="hint"></div></div>
  <div class="over"><div class="hint"></div></div>
  <div class="over"><div class="hint"></div></div>
</div>
<style>
.scroll{
position:relative;
width:200px;
height:200px;
z-index:1;
overflow-y:scroll;
overflow-x:visible; //не работает
}
.over{
width:190px;
padding:5px;
position:relative;
z-index:1;
}
.hint{
width:200px;
height:200px;
position:absolute;
z-index:99;
left:-150px;
display:none;
}
</style>

В зависимости от данных из mysql, по высоте дивы с классом over могут быть разными.
Суть проблемы:
при наведении на div.over, div.hint должен появляться слева от div.scroll, но т.к. не работает overflow-x:visible, он обрезается так, будто я прописал ovreflow:hidden;
Шарил по jQuery-плагинам, гуглил, лазил по форумам - ничего дельного не нашел.

Подскажите, пожалуйста, наименее затруднительный из валидных способ реализовать представленное сверху.