Spent the entire night on this and still no solution... I have a link that, when hovered over by a user, should display a box (div) underneath it. The box should overlay anything that is beneath it. Does anyone know how to achieve this in the simplest way using pure CSS?
Thanks, Yummi
body {
background-color: #6B6B6B;
background: url(http://wizzfree.com/pix/bg.jpg) fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
font-family: Arial;
color: darkgrey;
font-size: 14px;
line-height: .3;
letter-spacing: .5px;
margin: 50px;
}
/*............... emojis ...............*/
.emojis {
position: absolute;
padding: 25px 15px 10px 20px;
border-radius: 20px 0px 20px 20px;
background-color:rgba(0, 0, 0, .3);
}
.emojis2>img{
position:absolute;
left:100%;
top:0;
}
.smiley {
position: absolute;
top: 25px;
left: 430px;
}
/*... input message ...*/
input[type=text] {
width: 300px;
height: 50px;
border: none;
outline: none;
padding-left: 37px;
font-family: Arial;
color: white;
font-size: 16px;
font-weight: bold;
letter-spacing: 1.5px;
background-color:rgba(0, 0, 0, .3);
}<!-- emojis button -->
<div class="smiley" style="height:42px;display:flex;"><a href="emojis.html"><img src="http://wizzfree.com/pix/smiley2.png" width="40"></a>
<!-- input message -->
<form><input type="text" id="fname" name="fname" value="add emoji here" onFocus="this.value=''"></form>
</div>
<!-- emojis list -->
<div class="emojis" style="letter-spacing:3px;font-size:20px;">
<div class="emojis2"><img src="http://wizzfree.com/pix/bubble1.png" width="40" style="transform:scaleX(-1);"></div>
<br>😃😁😅🤣😉😊😇😲😳😥<p>
<br>🥰😍😘😜🤫🤤😈😻🙈🙊<p>
<br>💘💕💞💌💑 💐🌹🎀🍨🍭<p>
<br>💃🏄🛀🏩👑🦁🦄 🎠🧸💍
</div>