Encountering a strange issue was the order of the day, as I found myself faced with an unordered list featuring a background image in the form of a semi-transparent PNG. To my surprise, the transparency only became visible once I designated the unordered list's position as absolute. This peculiar behavior has left me scratching my head - is there a logical explanation for this phenomenon?
<ul id="flag_down">
<li>
<a href="#" class="flag" onclick="return false"></a><span>Flag</span>
<ul id="fd-menu">
<li><a class="js-inpost-duplicate" href="#duplicate">duplicate</a></li>
<li><a class="js-inpost-nsfw" rel="83858" href="#nsfw">nsfw</a></li>
<li><a href="/dmca/">copyright</a></li>
</ul>
</li>
</ul>
The CSS:
#flag_down li ul {
display:none;
left:6px;
margin-top:2px;
position:relative;
background: url("../bg-dropdown.png") repeat-y scroll 0 0 transparent;
width: 83px;
z-index: 9999;
}