Создание многоуровневого выпадающего меню в таблице

Question

Приносим извинения, если есть очевидный ответ на этот вопрос или если я использую неправильные термины - я не очень часто работаю с CSS.

То, что я работаю с динамично генерируются таблица:

<style type="text/css"> 
    .tg {border-collapse:collapse;border-spacing:0;} 
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;} 
    </style> 

     #some would be code here to display column headers; I've omitted it. 
     <tr> 
     <td class="tg-031e"><input type="checkbox" onclick="showForm()"></td> 
     <td class="tg-031e">%s</td> 

Примечания У меня есть флажок в одной из ячеек, которые называют showForm(), когда он нажал. Эта функция выглядит следующим образом:

function showForm() { 
document.getElementById("f2").style.display = "block"; 

Это делает многоуровневое выпадающее меню в <div id="f2" style="display:none"> блоке внезапно появляются. CSS для многоуровневого выпадающего является:

/* Menu Styles */ 

.third-level-menu 
{ 
    position: absolute; 
    top: 0; 
    right: -150px; 
    width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.third-level-menu > li 
{ 
    height: 30px; 
    background: #999999; 
} 
.third-level-menu > li:hover { background: #CCCCCC; } 

.second-level-menu 
{ 
    position: absolute; 
    top: 30px; 
    left: 0; 
    width: 150px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: none; 
} 

.second-level-menu > li 
{ 
    position: relative; 
    height: 30px; 
    background: #999999; 
} 
.second-level-menu > li:hover { background: #CCCCCC; } 

.top-level-menu 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.top-level-menu > li 
{ 
    position: relative; 
    float: left; 
    height: 30px; 
    width: 150px; 
    background: #999999; 
} 
.top-level-menu > li:hover { background: #CCCCCC; } 

.top-level-menu li:hover > ul 
{ 
    /* On hover, display the next level's menu */ 
    display: inline; 
} 


/* Menu Link Styles */ 

.top-level-menu a /* Apply to all links inside the multi-level menu */ 
{ 
    font: bold 14px Arial, Helvetica, sans-serif; 
    color: #FFFFFF; 
    text-decoration: none; 
    padding: 0 0 0 10px; 

    /* Make the link cover the entire list item-container */ 
    display: block; 
    line-height: 30px; 
} 
.top-level-menu a:hover { color: #000000; } 

И HTML представляет собой вариант:

<ul class="top-level-menu"> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Services</a></li> 
    <li> 
     <a href="#">Offices</a> 
     <ul class="second-level-menu"> 
      <li><a href="#">Chicago</a></li> 
      <li><a href="#">Los Angeles</a></li> 
      <li> 
       <a href="#">New York</a> 
       <ul class="third-level-menu"> 
        <li><a href="#">Information</a></li> 
        <li><a href="#">Book a Meeting</a></li> 
        <li><a href="#">Testimonials</a></li> 
        <li><a href="#">Jobs</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Seattle</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Contact</a></li> 
</ul> 

(Оба эти из here)

Теперь проблема в том, что, когда флажок установлен и запускается showForm, появляется многоуровневое раскрывающееся меню, но любые уровни за пределами корневой опции закрываются границами ячеек, в которых он отображается. Другими словами, когда я наводил указатель мыши на элемент корневого меню, подгруппы отображаются только в небольшом пространстве между нижней частью корневого элемента меню и нижней частью ячейки, в которой находится меню. Таким образом, меню ограничено ячейкой, в которой она находится; Я попытался изменить непрозрачность таблицы, но это не помогло.

Есть ли способ перевернуть меню или, альтернативно, сохранить таблицу в фоновом режиме, чтобы меню и все его подгруппы отображались нормально?

Спасибо за ваше время

Answer 1

Вы должны быть в состоянии применить position: absolute к меню, чтобы позволить ему оказывать вне таблицы.

td { 
 
    background-color: blue; 
 
    height: 100px; 
 
    vertical-align: top; 
 
    width: 100px; 
 
} 
 

 
div { 
 
    background-color: red; 
 
    height: 50px; 
 
    position: absolute; 
 
    width: 150px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <div>Overflowing content</div> 
 
    </td> 
 
    <td> 
 
     Content 
 
    </td> 
 
    </tr> 
 
</table>