We've compiled a variety of no-cost HTML and CSS code examples for dropdown menus in this article from reliable sources such as CodePen, GitHub, and other reputable online platforms. Dropdown menus are a prevalent and effective way to structure and display navigation options on your site. From our assortment of dropdown menus, which encompasses horizontal and vertical menus, mega menus, and multi-level menus, you can select the design that best fits your website's needs.
A dropdown menu is a graphical user interface element that allows users to choose a single option from a set of choices. The dropdown list initially displays only at a single level until a user interacts with it by selecting a value.
When selecting a main menu heading, a submenu will expand displaying additional choices. These menus facilitate browsing the site and reaching various content sections, including subcategories. An effectively designed website can offer a user-friendly experience for visitors.
HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are essential for creating DropDowns. In addition to HTML and CSS, JavaScript can also be employed to develop distinctive DropDown menus. Nevertheless, this tutorial focuses solely on CSS and HTML. Consequently, JavaScript concepts are excluded from this instructional material.
As previously learned in earlier modules, CSS enhances the visual appeal of your webpage, whereas HTML serves as the foundational language for structuring web content.
This tutorial will guide you through the process of creating personalized CSS dropdown menus. Along the way, you'll encounter creative design elements. To begin, all you require is a simple code editor such as Notepad++.
DropDowns in CSS
One of the key components in a dynamic website is the dropdown list. Dropdown menus are generated through Cascading Style Sheets (CSS). A dropdown menu consists of a series of lists positioned below an unordered list, or ul> as it is often known in HTML. Dropdown layouts are constructed by nesting list (li) tags within the ul tag. Apply CSS to the elements of the layout to highlight the intended styles. The dropdown list was crafted using very basic CSS attributes.
<!DOCTYPE html>
<html>
<head>
<title>Example of Dropdown menu</title>
</head>
<body>
<nav>
<ul>
<li class="L-1">
<a href="">Level-1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Output:
Add a CSS property to the HTML markup in order to construct an engaging dropdown layout.
<!DOCTYPE html>
<html>
<head>
<title>Navigation property</title>
<style>
a {
color: black;
background-color: #990;
text-decoration: none;
}
nav {
background: pink;
}
nav>ul {
margin: 0 auto;
width: 80px;
}
nav ul li {
display: block;
float: left;
margin-left: -40px;
position: relative;
}
nav ul a {
display: block;
float: left;
width: 130px;
padding: 10px 10px;
}
nav ul a:hover {
background: lightblue;
}
nav ul li ul li {
float: none;
}
nav ul li ul {
display: none;
position: absolute;
background: lightblue;
top: 40px;
}
nav ul li:hover>ul {
display: block;
}
nav ul li a {
display: block;
}
.main {
font-size: 40px;
font-weight: bold;
color: red;
Text-align: center;
}
p {
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div class="main">Welcome</div>
<p>Example of Dropdown Navigation property</p>
<nav>
<ul>
<li class="Lev-1">
<a href="">Level-1</a>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Output:
Based on a drop-down structure, the code previously created achieves the desired result. Below, we explain several crucial HTML code elements:
- The outermost container is nav.
- We have the nav ul li: ul li's float set to none, so it won't move when we hover over it.
- Use relative position to shift or modify the location of li concerning its component.
- To show how hover affects the ul that comes right after it in the li, use the '>' command after hover.
A DropDown that is Centred
The float value of the right-aligned dropdown is adjusted to right in order to show the drop-down content towards the right side of the screen. It is important to apply the float right property to the containing div that holds the content.
<!DOCTYPE html>
<html>
<head>
<title>Example of right-aligned dropdown content property</title>
<style>
#drop {
background-color: brown;
color: black;
padding: 10px;
font-size: 14px;
width: : 200px;
height: : 60px;
border-radius: 5px;
font-size: 20px;
}
#drop-down {
position: relative;
display: inline-block;
}
#dropdown-menu {
display: none;
position: absolute;
background-color: pink;
width: 160px;
margin-left: -45px;
border-radius: 5px;
z-index: 1;
}
#dropdown-menu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.main {
font-size: 40px;
font-weight: bold;
color: red;
Text-align: center;
}
p {
font-size: 30px;
font-weight: bold;
text-align: center;
}
#dropdown-menu a:hover {
background-color: lightblue;
}
#drop-down:hover #dropdown-menu {
display: block;
}
</style>
</head>
<body>
<div class="main">Welcome</div>
<p>Example of Right-aligned Dropdown content property</p>
<div id="drop-down"
style=" float: right;
margin-right: 80px;">
<button id="drop">DropDown</button>
<div id="dropdown-menu">
<a href="">Item 1</a>
<a href="">Item 2</a>
<a href="">Item 3</a>
</div>
</div>
</body>
</html>
Output: