DropDown Menus in CSS

We've collected several free HTML and CSS code samples for dropdown menus in this post from dependable sources like CodePen, GitHub, and other trustworthy websites. Dropdown menus are a common and efficient method of organizing and presenting navigation choices on your website. You may choose the ideal design for your website's requirements from our selection of dropdown menus, which includes horizontal and vertical menus, mega menus, and multi-level menus.

A drop-down menu is a visual control element that enables users to select one value from a list of options. Until a user taps a value to start a drop-down list, the drop-down list only shows at one level.

When a top-level heading of a menu is clicked, a drop-down menu with more options appears. You may use these menus to explore the website and access all available content, including all subcategories. Your website might be a well-organized space for your consumers if it is well-designed.

CSS HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are both used in DropDowns. Along with HTML and CSS, JavaScript may create unique DropDown menus. However, this guide only covers CSS and HTML. Thus, JavaScript is not covered in this lesson.

As you know from prior courses, CSS adds artistic design elements to your web page, while HTML is the fundamental code to organize a web page and its content.

This article will teach you how to make custom CSS multiple drop-down menus. You will also come across some inventive design components. A basic code editor like Notepad ++ is all you need to get started.

DropDowns in CSS

One of the most crucial elements of an interactive website is the dropdown menu. The drop-down menus are created with CSS. A drop-down is a collection of lists arranged beneath an unordered list, or ul> as it is commonly referred to in the world of HTML. Drop-down structures are made using nested list (li) tags under the ul tag. Use CSS for the structure's components to emphasize the desired effects. The drop-down menu was made using extremely simple CSS properties.

<!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:

Example: Add a CSS attribute to the HTML code to build an interactive drop-down structure.

<!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 right-aligned dropdown's float value is set to right to display drop-down content on the right screen. The div that houses the content should have float right added.

<!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: