css dropdown

css

A dropdown menu is a navigation element that displays a list of links when clicked, and hides the list when clicked again. In CSS, you can create a dropdown menu using the :hover pseudo-class and the display property.

Here’s an example of how you might create a dropdown menu using HTML and CSS:


<nav>
    <ul>
        <li><a href="/">Home</a></li>
        <li>
            <a href="#">About</a>
            <ul>
                <li><a href="/about">About Us</a></li>
                <li><a href="/history">Our History</a></li>
                <li><a href="/team">Meet the Team</a></li>
            </ul>
        </li>
        <li><a href="/services">Services</a></li>
        <li><a href="/contact">Contact</a></li>
    </ul>
</nav>
nav ul li ul {
    display: none;
}

nav ul li:hover ul {
    display: block;
    position: absolute;
    width: 200px;
    background-color: #f2f2f2;
}

nav ul li ul li {
    display: block;
}

nav ul li ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

nav ul li ul li a:hover {
    background-color: #ccc;
}

This creates a dropdown menu with a list of links under the “About” menu item. When the user hovers over the “About” menu item, the list of links is displayed. When the user moves the cursor away from the menu item, the list is hidden again.