Я пытаюсь построить панель навигации, используя flex-box. Когда кто-то наводит курсор на определенный элемент, он отображает его подэлемент, но когда я наводю курсор мыши на «Галерея», он не показывает элементы Images
и Videos
. Я хочу видеть эти элементы в столбце:
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a>
<ul id="dropdown">
<li><a href="#">Images</a></li>
<li><a href="#">Videos</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
</html>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav ul{
height: 8vh;
width: 100vw;
background-color: aqua;
list-style: none;
display: flex;
justify-content: space-around;
align-items: center;
}
nav ul li a{
text-decoration: none;
color: black;
font-size: 20px;
padding: 15px 20px;
font-weight: bold;
}
nav ul li a:hover{
background-color: coral;
}
#dropdown {
display: none;
}
nav ul li a:hover #dropdown li {
display: flex;
flex-direction: column;
color: black;
}