css dropdown
cssA 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.
Other Article on Tag css
- - css audio
- - CSS Backgrounds
- - CSS Borders
- - CSS Colors
- - CSS Cursors
- - CSS Dimension
- - css dropdown
- - css ellipsis
- - css em vs rem
- - CSS flex