lala.uwu.ai nav box

<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hi+Melody&family=Molle:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Molle:ital@1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Mali&display=swap" rel="stylesheet">
</head>

<style>

#he {
width: 50px;
height: 50px;
}

.img {
width: 30px;
height: auto;
margin-top: 5px;
margin-left: 5px;
top: 0px;
left: 0px;
position: fixed;
z-index: 1;
}

.img:hover {
opacity: 0.7;
}

#he:hover #cont{
position: fixed;
left: 30px;
}

#cont {
width: 120px;
height: 100px;
transition: 0.8s ease;
top: 0px;
margin-top: 5px;
margin-left: 5px;
line-height: 30px;
left: -100px;
position: fixed;
padding-left: 5px;
padding-top: 9px;

}

#butt a{
background: #ffe5f3;
width: 100px;
height: 12px;
padding: 3px;
font-size: 0.7em;
color: white;
text-decoration: none;
border-radius: 4px;
font-family: 'Mali', cursive;
position: relative;
bottom: 0px;
left: 0px;
margin-top: 5px;

}

#butt2 a{
background: #fca1d5;
width: 100px;
height: 12px;
padding: 3px;
font-size: 0.7em;
color: white;
text-decoration: none;
border-radius: 4px;
font-family: 'Mali', cursive;
margin-top: 5px;

}

#butt3 a{
background: #f48dc8;
width: 100px;
height: 12px;
padding: 3px;
font-size: 0.7em;
color: white;
text-decoration: none;
border-radius: 4px;
font-family: 'Mali', cursive;
margin-top: 5px;

}
#butt4 a{
background: #f48dc8;
width: 100px;
height: 10px;
padding: 3px;
font-size: 0.7em;
color: white;
text-decoration: none;
border-radius: 4px;
font-family: 'Mali', cursive;
margin-top: 5px;

}

#butt3 a:hover {
color: #FE82B6;
background: #fff;
}

#butt4 a:hover {
color: #FE82B6;
background: #fff;
}

#butt2 a:hover {
color: #FE82B6;
background: #fff;
}
#butt a:hover {
color: #FE82B6;
background: #fff;
}

</style>
<div id="he">

<img class=img src="http://media.tumblr.com/tumblr_m54xs2z0dn1qid2nw.gif">

<div id="cont">

<div id="butt">
<div align="left">
<a href="#h">about me </a>
</div>
</div>


<div id="butt2">
<div align="left">
<a href="#ii">guidelines</a>
</div>
</div>

<div id="butt3">
<div align="left">
<a href="#iii"> more & notes </a>
</div>
</div>

</div> </div>