Youtubeden css dersleri izlerken videodakinin aysını yapmaya çalışıyordum.Dropdown menü yaparken position absolute yapınca görünmez oluyor kodlar bu şekilde`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.ul{
list-style-type: none;
background-color: #3F3F3F;
width: 100%;
}
.ul li a{
text-decoration: none;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
.ul li{
padding: 15px;
margin-left: -30px;
display: inline-block;
width: 100px;
margin-right: 15px;
}
.ul li:hover{
background-color: red;
transition: 0.5s;
}
.ul i{
padding-right: 10px;
}
#news_dp{
position: absolute;
z-index: 1;
display: block;
}
</style>
</head>
<body>
<ul class="ul">
<li><a href="#"><i class="fa-solid fa-house"></i>Home</a></li>
<li>
<a href="#"><i class="fa-solid fa-newspaper"></i>News</a>
<ul id="news_dp">
<li><a href="#">News1</a></li>
<li><a href="#">News2</a></li>
<li><a href="#">News3</a></li>
<li><a href="#">News4</a></li>
</ul>
<li><a href="#"><i class="fa-regular fa-id-card"></i>Contact</a></li>
<li><a href="#"><i class="fa-solid fa-plus"></i>About</a></li>
</ul>
</body>
</html>`