При наведении курсора на определенный элемент он отобразит его на панели навигации. - PullRequest
0 голосов
/ 25 марта 2020

Я пытаюсь построить панель навигации, используя 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;
    }
...