Исправить проблему покрытия зависшего стола / проблемы зависания со столом

У меня проблема с созданием таблицы. Мне нужно создать таблицу с некоторыми ячейками с событием наведения/всплывающей подсказки. Например, когда я указываю на ячейку, мне нужно показать одну таблицу столбцов со ссылками, но когда я делаю это таким образом, у меня возникают проблемы с перекрытием (я не могу использовать ссылки из первой ячейки). На данный момент я пытался использовать только CSS и HTML, но решение с JS также принимается.

HTML:

<div class = "ttip">
  <a class = "foo">FOO</a>
  <table>
    <tr>
      <td><a href='bar'>Bar</a></td>
    </tr>
    <tr>
      <td><a href='baz'>Baz</a></td>
    </tr>
  </table>
</div>

<div class = "ttip">
  <a class = "foo">FOO2</a>
  <table>
    <tr>
      <td><a href='bar2'>Bar2</a></td>
    </tr>
    <tr>
      <td><a href='baz2'>Baz2</a></td>
    </tr>
  </table>
</div>

Стиль:

.ttip {
  position: relative;
  display: table;
}

.ttip>table {
  position: absolute;
  white-space: nowrap;
  border-collapse: collapse;
  display: none;

}

.ttip>table td {
  border: 1px dotted #000;
  padding: 2px;


}

.ttip:hover>table {
  display: table;

}

Жить:

https://jsfiddle.net/uLm0gjcn/3/

С уважением