How to Make an HTML CSS Dropdown Navigation Menu
buayaberdiri.blogspot.com - In the website or blog navigation menu, we usually make more than one menu or what we usually call a dropdown menu. Dropdown menu is the main menu that displays more than one menu.
In HTML and CSS we can make dropdown menus simple and easy to learn.
here is an example of how you can create a basic dropdown navigation menu using HTML and CSS:
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li>
<a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">SEO</a></li>
<li><a href="#">Social Media</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
position: relative;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #000;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
}
nav ul ul li {
display: block;
}
nav li:hover > ul {
display: block;
}
In this example, we have a navigation menu with four links, and one of the links has a dropdown menu with three sub-links.
We use an unordered list to create the menu, and each link is an <a> element wrapped in an <li> element. The link with the dropdown menu has a nested unordered list.
In the CSS, we set the list-style, margin, and padding to zero for the unordered list, and set the display property to inline-block for the list items to display them horizontally.
We use the position property to position the dropdown menu below the parent link, and set its display property to none so it's hidden until the parent link is hovered over. When the parent link is hovered over, we set the display property of its child ul to block to display the dropdown menu.
You can customize this example to fit your needs, including changing the colors, font, and size of the menu.