我想从导航栏的配置文件部分创建一个下拉菜单。我该怎么做我试着查了一下，但没有发现任何适合我的情绪。(我希望这个下拉菜单包含2个项目。(
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}<div class="nav">
<ul>
<li><a href="index.php">Main page</a></li>
<li><a href="servers.php">Servers</a></li>
<li><a href="rules.php">Rules</a></li>
<li><a href="vip.php">VIP</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="profile.php">Profile</a></li>
</ul>
</div>不是很时尚，但像你在其他网站上看到的普通网站也不要忘记在自己的浏览器上运行它试着让它有反应您正在使用"；px"；这不是宣布措施的好主意尝试使用"；vh"；对于高度和"；vw"；宽度
*{
text-decoration: none;
background-color: #141424;
color: #787884;
margin: 0;
padding: 0;
}
.avatar{
vertical-align: middle;
}
ul li {
padding: 30px 40px;
font-size: 2rem;
list-style-type: none;
display: inline-block;
font-family: sans-serif;
}
ul li a{
font-family: "Magic Mushroom";
}
a:hover{
color: white;
}
ul li:hover a{
background-color: #454552;
}
ul li:hover{
background-color: #454552;
}
ul li a img{
border-radius: 50%;
}
.nav{
text-align: center;
border-bottom: 3px solid #787884;
}
.active{
color: white;
}
.dropdown {
position: absolute;
height: 0;
pointer-events: none;
opacity: 0;
transition: 0.3s ease;
width: 40vw;
top: 120px;
display: flex;
z-index: -1;
flex-direction: column;
right: 10%;
background-color: #454552;
}
.profile:hover .dropdown{
height: 10vh;
opacity: 1;
pointer-events: all;
top: 100px;
z-index: 1;
}<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="author" content="Farkas">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="nav">
<ul>
<li><a href="index.php">Main page</a></li>
<li><a href="servers.php">Servers</a></li>
<li><a href="rules.php">Rules</a></li>
<li><a href="vip.php">VIP</a></li>
<li><a href="contact.php">Contact</a></li>
<li class="profile"><a href="profile.php">Profile</a>
<ul class="dropdown">
<li>item1</li>
<li>item2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>