My HTML

About Me

                            <div id="drop-down-1" class="drop-down-2">
                                <div class="dd-inside">
                                    <a  class="ui io" href="">LinkedIn <i class="fa-brands fa-linkedin-in"></i></a><hr>
                                    <a class="ui" href="">Twitter <i class="fa-brands fa-twitter"></i></a><hr>


                                    <a class="ui" href="">Instagram <i class="fa-brands fa-instagram"></i></a><hr>
                                    <a class="ui"href="">GitHub <i class="fa-brands fa-github"></i></a><hr>
                                    <a class="ui" href="">Discord <i class="fa-brands fa-discord"></i></a>
                                </div>
                            </div>

My CSS

.oil{
position: relative;
display: inline-block;
}

.oil:hover .drop-down-2{

display: block;
}

.drop-down-2{
position:absolute;
top: 30px;
display: none;
}

.dd-inside{

display: flex;
background-color: white;
flex-direction: column;
width: 200px;
opacity: 1;
border-radius: 10px;
backdrop-filter: blur(50px);

}

.dd-inside .ui{
display: flex;
padding: 20px 50px 30px 20px;
margin: 5px;
opacity: 0.7;
flex-direction: row;
word-spacing: 10px;
}

.dd-inside .ui:hover{
background-color: rgb(213, 212, 212);
color: red;
border-radius: 10px;
font-size: 21px;

}

.fa-brands{
padding-left: 20px;
font-size: 25px;
}

hr{
margin: 0 20px;
}

I expected for the drop-down to show up below “About” I used “:hover” but it’s not working on it.
It’s not changing into “display: block;:” ,
Thank you.