menu in lala uwu ai

<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: #FE82B6;
width: 100px;
height: 10px;
padding: 3px;
border: 1px solid #000;
font-size: 0.7em;
color: white;
text-decoration: none;
font-family: 'Mali', cursive;
position: relative;
bottom: 0px;
left: 0px;
margin-top: 5px;

}

#butt2 a{
background: #FE82B6;
width: 100px;
height: 10px;
padding: 3px;
border: 1px solid #000;
font-size: 0.7em;
color: white;
text-decoration: none;
font-family: 'Mali', cursive;
margin-top: 5px;

}

#butt3 a{
background: #FE82B6;
width: 100px;
height: 10px;
padding: 3px;
border: 1px solid #000;
font-size: 0.7em;
color: white;
text-decoration: none;
font-family: 'Mali', cursive;
margin-top: 5px;

}
#butt4 a{
background: #FE82B6;
width: 100px;
height: 10px;
padding: 3px;
border: 1px solid #000;
font-size: 0.7em;
color: white;
text-decoration: none;
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>
<p> </p>
<p> </p>
<div id="butt2"> <div align="left"> <a href="#ii"> guidelines </a> </div> </div>
<p> </p>
<p> </p>
<div id="butt3"> <div align="left"><a href="#iii"> more & notes </a> </div> </div>

</div> </div>