Dropdown menus are a popular UI component that allows users to select one option from a list that appears when they interact with a trigger element, usually a button or a link. They are commonly used for navigation and can enhance user experience by organizing content in a compact manner. Dropdown menus can be implemented using HTML and CSS alone, but JavaScript can be used to add more interactivity if needed.
A dropdown menu is a graphical control element that displays a list of options or links when the user interacts with a trigger element, such as clicking on a button or hovering over a menu item. The dropdown menu typically hides the options until triggered, helping to keep the user interface clean and uncluttered. Dropdowns are used in various contexts, such as navigation bars, forms, and settings panels.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Horizontal Navigation Bar</title>
<style>
.navbar {
display: flex;
background-color: #333;
overflow: hidden;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 20px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<div class="navbar">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</body>
</html>