I have a table inside li tag, and I want to display the description on :hover inside td. However, when scrolling through the list, the description content starts to appear with a distance from its parent.
Despite trying various combinations of position settings for the description content parent and itself, following tips found on this site, nothing seems to work. My goal is simply to show the description on hover directly above each element. With the current CSS, as I scroll further down the list, the descriptions are shown even farther apart from their respective parents, as shown in the image.
Before scrolling: description, before any scrolling
The issue: After some scrolling: description with varying distances that correlate with scroll amount
.side div {
margin: 0;
padding-left: 1%;
padding-top: 1%;
padding-right: 0.5%;
width: 20%;
background-color: #D9D9D9;
position: fixed;
height: 100%;
box-shadow: 10px 0px 15px rgba(0, 0, 0, 0.3);
border-radius: 8px;
z-index: 1;
}
// Rest of the CSS code...
<div class="side">
<div>
<ul>
<li>
<table class="subscribed-channels"
data-ng-model="subscribedChannels">
// Table rows here...
</table>
</li>
</ul>
</div>
</div>