I would like an explanation on why my thought process on this isn't working. I know there are many other ways of doing what i'm trying to achieve, but i just want to understand why it fails. I would like the content of the "downmenu" show after i hover the "rightside".
.rightside{
background-color: transparent;
border: none;
position: fixed;
top: 0px; bottom: 0px;
right: 0px;
margin: 0px;
padding: 0px;
height: 100%;
width: 95px;
transition: 2s;
}
.hoverdrop{
background-color: transparent;
color: gray;
font-size: 22px;
border: none;
cursor: pointer;
position: fixed;
top: 0px; bottom: 0px;
right: 0px;
margin: 0px;
padding: 0px;
height: 100%;
width: 95px;
}
.rightside :hover > .langcontent{
visibility: visible;
opacity: 1;
}
.langcontent{
visibility: hidden;
opacity: 0;
position: fixed;
right: 0px;
top: 83px;
background-color: transparent;
min-width: 95px;
text-align: center;
overflow: hidden;
height: 30px;
transition: 2s;
}
.langcontent a{
font-size: 22px;
color: gray;
font-family: sans-serif;
}<div class="rightside">
<button class="hoverdrop">ENG
</button>
<div id="downmenu" class="langcontent">
<a href="esp.html">ESP</a>
</div>
</div>
