Здравствуйте. Я пытаюсь создать выпадающее меню на моем веб-сайте flexbox. Проблема в том, что когда я оформляю стили выпадающего меню, все ссылки располагаются друг над другом. Вот фрагмент кода, который доставляет мне проблемы. Если кто-то может помочь, я буду признателен. .Sub является второй ул. Я также подписан на видео на YouTube.
!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | Page</title>
<link rel="stylesheet" href="style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap"
rel="stylesheet"
/>
</head>
<body>
<header>
<img src="img/logo/internet.png" alt="" />
<div class="hamburger">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="#">Portfolio
<span class="arrow">▼</span>
<span class="right">▶</span>
</a>
<ul class="sub">
<li><a href="">Web Dev</a></li>
<li><a href="">Game Dev</a></li>
<li><a href="">Software Dev</a></li>
<li><a href="">App Dev</a></li>
<li><a href="">Progressive Web App Dev</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
<li><a href="#">Cases
<span class="arrow">▼</span>
<span class="right">▶</span>
</a>
<ul class="sub">
<li><a href="">Web Dev</a></li>
<li><a href="">Game Dev</a></li>
<li><a href="">Software Dev</a></li>
<li><a href="">App Dev</a></li>
<li><a href="">Progressive Web App Dev</a></li>
</ul>
</li>
</li>
</ul>
</nav>
</header>
<main></main>
<section></section>
<footer></footer>
</body>
<script
src="https://code.jquery.com/jquery-3.5.0.js"
integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
crossorigin="anonymous"
></script>
<script src=""></script>
</html>
nav a {
color: #fff;
display: block;
height: 64px;
font-family: Crimson Text;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.4s;
}
nav a:hover {
background-color: skyblue;
}
nav ul {
list-style: none;
display: flex;
}
nav li {
width: 100%;
text-align: center;
position: relative;
}
nav .right {
display: none;
}
nav li:hover .sub > li {
display: block;
top: 0;
}
.sub li {
display: none;
position: absolute;
top: 0;
}
.sub {
Display: flex;
Flex-direction: column;
Position: absolute;
Width: 100%;
}