Ein Popup-Menü vor einer Tabelle anzeigen

Question

Ich habe für jede Tabellenzeile, die bei Hover angezeigt wird, ein Menü erstellt. Alles funktioniert gut, außer eines: Wenn ich über den letzten Reihen Menü bewegen, wird das Menü vor dem Tabellen Container Popup sollte stattdessen eine Scrollbar im Inneren des Behälters zu schaffen ..

Screenshot of real application example

Siehe das Beispiel hier :

.container { 
 
    max-height: 70px; 
 
    overflow-y: scroll; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
.menu-container { 
 
    position: relative; 
 
} 
 
.menu-container ul { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border: 1px solid black; 
 
    background-color: gray; 
 
} 
 
.menu-container ul:hover { 
 
    position: absolute; 
 
    margin-top: -10px; 
 
    width: 100%; 
 
} 
 
.menu-container ul li { 
 
    display: none; 
 
    list-style-image: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
} 
 
.menu-container ul:hover li { 
 
    color: red; 
 
    display: block; 
 
    margin-bottom: 0px; 
 
}

<div class="container"> 
 
<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
    <td> 
 
     <div class="menu-container"> 
 
     <ul> col1 
 
      <li>menu 1</li> 
 
      <li>menu 2</li> 
 
      <li>menu 3</li> 
 
      <li>menu 4</li> 
 
      <li>menu 5</li> 
 
      <li>menu 6</li> 
 
      <li>menu 7</li> 
 
      <li>menu 8</li> 
 
     </ul> 
 
     </div>  
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr>  
 
    <tr> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr>  
 
    </tbody> 
 
</table> 
 
</div>

https://jsfiddle.net/6ty7uwup/1/

Haben Sie irgendwelche Tipps für mich? Danke!

Answer 1

Das Problem ist die Positionierung in Ihrem CSS. Der Container sollte kein Positionsattribut haben, um in seiner Position zu bleiben.

Später sollten Sie absolute Position haben, um die li über allem zu halten. Hier

ist die feste css:

.menu-container { 

} 
.menu-container ul { 
    padding: 0px; 
    margin: 0px; 
    border: 1px solid black; 
    background-color: gray; 
} 
.menu-container ul:hover { 
    position: absolute; 
    margin-top: -10px; 
} 

Answer 2

Das Problem war, dass .menu-container Position auf relativ eingestellt wurde, so dass die ul relativ zu, dass (die 2 relative hier Worte sind nicht verwandt!).
Entfernen position: relative von .menu-container tun, was Sie wollen, aber die Größe des Untermenüs ul wird nicht identisch sein mit den übergeordneten li Elemente.

So habe ich calc für die Breite der ul
(der Wert geändert werden kann, wenn an anderer Stelle versucht)

.container { 
 
    max-height: 70px; 
 
    overflow-y: scroll; 
 
} 
 
table { 
 
    width: 100%; 
 
} 
 
.menu-container { 
 
    
 
} 
 
.menu-container ul { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    border: 1px solid black; 
 
    background-color: gray; 
 
} 
 
.menu-container ul:hover { 
 
    position: absolute; 
 
    margin-top: -10px; 
 
    width: calc((100% - 40px)/5); 
 
} 
 
.menu-container ul li { 
 
    display: none; 
 
    list-style-image: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    width: 100%; 
 
} 
 
.menu-container ul:hover li { 
 
    color: red; 
 
    display: block; 
 
    margin-bottom: 0px; 
 
}

<div class="container"> 
 
<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
    <td> 
 
     <div class="menu-container"> 
 
     <ul> col1 
 
      <li>menu 1</li> 
 
      <li>menu 2</li> 
 
      <li>menu 3</li> 
 
      <li>menu 4</li> 
 
      <li>menu 5</li> 
 
      <li>menu 6</li> 
 
      <li>menu 7</li> 
 
      <li>menu 8</li> 
 
     </ul> 
 
     </div>  
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr>  
 
    <tr> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 1 
 
    </td> 
 
    <td> 
 
     col 2 
 
    </td> 
 
    <td> 
 
     col 3 
 
    </td> 
 
    <td> 
 
     col 4 
 
    </td> 
 
    </tr>  
 
    </tbody> 
 
</table> 
 
</div>

P. S. Weird Glitch. Wenn Sie den Text der ul auswählen, scrollt die Tabelle dorthin, wo der Text hätte sein sollen.