Text in popup Div disappears on mobile - html

Question

I have a webpage of vocabulary words, and hovering over the words triggers a popup with the definition. I accomplish this with the "dropdown" and "dropdown" content Divs. However for some reason the content inside the Divs (in this case the vocab words themselves) completely disappear in mobile, although the unordered list bullets do not. This is a pure html/css settup so I'm not sure what the issue is. I've already tested it on multiple browsers and phones and the problem is clearly displaying on mobile, whether it's iOS or Android.
Here is how the HTML looks like for one of the vocab words:
<ul><li style="color:white; float:left; width:50%;" rel="color:white;float:left; width:50%;"><div class="dropdown"><strong><span style="font-size: 16px; color:white;">Character</span></strong><div class="dropdown-content"><span style="color: rgb(0, 0, 0);">The nature of an individual's moral personality, derived from his rooted, chosen moral values which are
consistently applied and expressed by his behavior and actions.</span></div>
Here's the dropdown code from the stylesheet:
.dropdown {
position: absolute;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 300%;
min-width:350px;
max-width:850px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
Note I am working off a third party online courses platform for what it's worth. There may be some styling rules hidden that could cause issues, but hopefully whatever is causing this is obvious enough to much more seasoned developers.

Answer 1

.dropdown {
position: absolute;
display:block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 300%;
min-width:350px;
max-width:850px;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<ul>
<li style="color:white; float:left; width:50%;" rel="color:white;float:left; width:50%;">
</li>
</ul>
<div class="dropdown">
<strong>
<span style="font-size: 16px; color:black;">Character
</span>
</strong>
<div class="dropdown-content">
<span style="color: rgb(0, 0, 0);">The nature of an individual's moral personality, derived from his rooted, chosen moral values which are
consistently applied and expressed by his behavior and actions.
</span>
</div>
</div>
hi i tried your html and its working hope this helps thanks