CSS Tutorial: A Comprehensive Guide
Master CSSS with our in-depth tutorials. From beginner to advanced topics, explore essential concepts and upskill yourself.
- 23
- 4
Tutorial Playlist
23 Lessons1. CSS Tutorials
2. CSS Media Queries
3. CSS Selectors
4. CSS Navigation Bar
5. CSS Transition
6. CSS Text
7. How to Center a Div in CSS
8. CSS Images
9. CSS Float
10. CSS Form
11. CSS Inline Block
12. CSS Examples
13. CSS Dropdown
Now Reading
14. CSS Flexbox
15. Responsive Web Design
16. CSS Cheat Sheet
17. CSS Variables
18. CSS Grid Layout
19. CSS Animation
20. CSS Frameworks
21. CSS Positioning
22. CSS Comment
23. CSS Gradients
CSS Dropdown
Cascading Style Sheets (CSS) dropdowns are a key part of modern web design. This is because they offer users an easy way to access various sections or features of a site. CSS shapes a dropdown appearance and behavior. This aligns with a website's design aesthetic and functionality.
Dropdowns were initially implemented using basic HTML markup. Yet, they have made great improvements over time. CSS has become the main tool used to design and style them.
A dropdown menu consists of nested lists within HTML unordered list (<ul>) tags. This drop-down list, represented by list items (<li>), forms the structure of the dropdown. CSS dropdowns offer a wide range of customization options. This enables web designers to make menus that fit seamlessly into the general style of their websites.
In this article, you will get to know about CSS dropdowns, how to use them, and understand operations for a dropdown menu in CSS.
Overview
CSS dropdown menus are a fundamental component of modern web design. These menus allow for easier navigation by organizing pages and subpages into a smooth and easily accessible format.
When building a dropdown menu, you can use CSS drop down menus to improve user experience greatly, especially on small screens where space is limited.
By the end of this guide, you will have the knowledge and skills to create your own CSS dropdown menu.
How to Create a CSS Dropdown Menu
To create a CSS drop down menu, you need a text or code editor to create the HTML and CSS file that contains the dropdown menu’s code. The steps to create a CSS dropdown menu are as follows:
Step 1: Start Writing the HTML Code
First, you need to create the HTML structure for your dropdown menu. Let’s say you're building a menu for a photography portfolio website. Your menu will include categories like "Landscapes," "Portraits," "Events," "Architecture," and "Wildlife." Each category will lead to a different gallery page showcasing relevant images.
Here's an example of the HTML code for your menu.html file. Note that we will link the styling.css file which we will create to the HTML document with the help of <link> tag in the <head> section:
<!DOCTYPE html>
<html>
<head>
<link href="styling.css" rel="stylesheet">
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Browse Galleries</button>
<div class="dropdown-child">
<a href="http://www.example.com/landscapes.html">Landscapes</a>
<a href="http://www.example.com/portraits.html">Portraits</a>
<a href="http://www.example.com/events.html">Events</a>
<a href="http://www.example.com/architecture.html">Architecture</a>
<a href="http://www.example.com/wildlife.html">Wildlife</a>
</div>
</div>
</body>
</html>
Step 2: Apply CSS and Create the Dropdown
With the HTML structure in place, you need to style your dropdown menu using CSS. You can enhance the appearance and functionality to ensure a seamless experience for your website browsers.
The CSS code to achieve the desired dropdown effect is as follows:
/* styles.css */
.mainmenubtn {
background-color: #4CAF50; /* Green */
color: white;
border: none;
cursor: pointer;
padding: 10px 20px;
}
.mainmenubtn:hover {
background-color: #45a049; /* Darker green */
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-child {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-child a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
Let’s understand the purpose of each CSS class used in the above example:
- .mainmenubtn: This class is applied to the button element representing the main dropdown menu trigger. It defines style properties like background color, text color, border, cursor type, padding, and margin. This ensures that the button is visually appealing and interactive.
- .dropdown: This class is applied to the parent container of the dropdown menu. It specifies the position of the dropdown menu relative to its parent element. In this case, it is set to relative, indicating that the dropdown menu's position is relative to its regular position in the document flow.
- .dropdown-child: This class is applied to the container of the dropdown menu items (i.e., the sub-menu). It defines the styling properties for the dropdown menu, such as display behavior (initially set to none to hide the menu), background color, minimum width, and box-shadow for visual effect.
- .dropdown-child a: This class is applied to the individual anchor (<a>) elements within the dropdown menu. It specifies the styling properties for the links, such as text color, padding, text-decoration (set to none to remove underline), and display behavior (set to block for each link to occupy its own line within the menu). This ensures that the dropdown menu links are visually distinct and user-friendly.
- .dropdown:hover .dropdown-child: This CSS rule targets the dropdown menu container (.dropdown-child) when the parent dropdown container (.dropdown) is hovered over. It overrides the initial display: none property, causing the dropdown menu to become visible (display: block) when the user hovers over the main dropdown button.
Note if you don’t want to have a separate CSS file you can also move the CSS styles inside the <style> tags in the <head> section of the HTML.
Improving CSS Dropdowns with More Operations
To create a great user experience, you can perform the following functions to improve CSS style dropdown and appearance:
1. Add a Sliding Animation Effect Transition to a CSS Dropdown
To improve the user experience in a CSS drop down list, you can use a smooth sliding effect. A CSS animated dropdown adds a touch of sophistication to your dropdowns. Example:
.dropdown-content {
/* Other styles... */
overflow: hidden;
}
.dropdown-content li {
/* Other styles... */
position: relative;
left: 100%;
transition: 0.5s;
}
.dropdown-btn:focus + .dropdown-content li {
left: 0;
}
When you apply the overflow: hidden; property to the dropdown content container, you ensure that any content exceeding its boundaries is concealed.
Setting position: relative; and left: 100%; to the dropdown items initially shifts them out of view to the right. When the CSS dropdown button receives focus, the left property transitions smoothly back to 0, revealing the dropdown items with a sliding effect.
2. Implement Hover Effects
Adding hover effects to the dropdown menu ensures interactivity and visual feedback. This makes the overall user experience more engaging. You can achieve this by applying CSS styles that change the appearance of dropdown items when hovered over.
Hover effects help users quickly identify interactive elements and navigate through the menu. Example: <!DOCTYPE html>
<html>
<head>
<style>
/* CSS for dropdown menu */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Hover effect */
.dropdown-content a:hover {
background-color: #f1f1f1;
color: blue; /* Change text color on hover */
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Browse Galleries</button>
<div class="dropdown-content">
<a href="#">Landscapes</a>
<a href="#">Portraits</a>
<a href="#">Events</a>
<a href="#">Architecture</a>
<a href="#">Wildlife</a>
</div>
</div>
</body>
</html>
3. Specify a Delay for Dropdown Items
To refine the user experience of your dropdown menu, you can introduce a delay when the menu items slide in and out. This adds a subtle yet impactful visual effect that enhances the overall flow of the menu interaction. Example:
<div class="dropdown">
<ul class="dropdown-content">
<li style="--delay: 1;"><a href="#">React</a></li>
<li style="--delay: 2;"><a href="#">Angular</a></li>
<li style="--delay: 3;"><a href="#">Vue</a></li>
<li style="--delay: 4;"><a href="#">Svelte</a></li>
</ul>
</div>
In your CSS stylesheet, access the CSS variables and apply the delay using the transition-delay property:
.dropdown-content li {
/* Other styles... */
transition-delay: calc(60ms * var(--delay));
}
Multi-level CSS Dropdowns
Multi-level CSS dropdowns are CSS dropdowns with multiple expansions. It contains a main menu with numerous levels of submenus. It is mostly used in website headers. It is used to set up hierarchical menu layers.
For instance, when you design an e-commerce website, your main menu might include categories like Clothing, Electronics, and Home Goods. When users hover each category, a subcategory appears, further expanding into specific product types. This hierarchical structure reduces clutter and ensures efficiency.
Implementing multi-level dropdowns requires careful consideration of accessibility and usability principles. This ensures seamless interaction across different devices and screen sizes. Example: <!DOCTYPE html>
<html>
<head>
<style>
/* CSS for dropdown menu */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top: 100%; /* Position the sub-menu below the parent */
left: 0;
background-color: #f9f9f9;
min-width: 160px;
z-index: 1;
}
.dropdown-content li {
padding: 10px;
}
.dropdown-content li:hover {
background: #ddd; /* Alter background shade on hover */
}
/* Show sub-menu when parent is hovered */
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<button class="mainmenubtn">Main Menu</button>
<div class="dropdown-content">
<ul>
<li><a href="#">Category 1</a></li>
<li class="dropdown">
<a href="#">Category 2</a>
<div class="dropdown-content">
<ul>
<li><a href="#">Subcategory 1</a></li>
<li><a href="#">Subcategory 2</a></li>
</ul>
</div>
</li>
<li><a href="#">Category 3</a></li>
</ul>
</div>
</div>
</body>
</html>
In this example:
- The .dropdown class represents the parent container of the dropdown menu.
- The .dropdown-content class represents the dropdown menu itself.
- The nested <ul> and <li> elements create the multi-level structure.
- CSS properties like position, display, and top are used to position and style the dropdown menu and its sub-menus.
- JavaScript adds more complex functionality like toggling the visibility of sub-menus.
Wrapping Up
CSS drop-down menus are unquestionably crucial to modern web design. They offer smooth navigation and greatly improve user experience. Using CSS, you can create dropdowns which work together with the style and functionality of your website.
It is important that you integrate CSS dropdown functionalities like hover effects, sliding animations, or even multi-level frameworks. One of the greatest advantages is that your site would have a dynamic and user-friendly dropdown menu which can greatly improve usability and design.
Frequently Asked Questions
- What is a CSS dropdown menu?
A CSS dropdown menu is a navigation feature on a website that presents options when activated, providing users with easy access to various sections or features.
- Why use a dropdown menu?
Dropdown menus improve navigation by displaying multiple options in a neat and organized manner, making it simpler for users to find what they need quickly without cluttering the interface.
- How do I create a CSS dropdown menu?
To create a CSS dropdown menu, you need to structure the menu using HTML and style it using CSS. Define elements such as the trigger, dropdown container, and menu items, and control their appearance and behavior through CSS rules.
- What are the main components of a CSS dropdown menu?
The main components include a trigger element, usually a button or link, a dropdown container that holds the menu items, and individual menu items or “CSS dropdown select” that users can select. The CSS dropdown menu on click is initiated by users
- Can CSS dropdown menus be responsive?
Yes, CSS dropdown menus can be made responsive by using techniques like media queries and flexible layouts. This ensures that the menu adapts gracefully to different screen sizes and devices.
- Can you style a dropdown menu?
Certainly! CSS offers extensive customization options for dropdown menus, allowing you to change colors, fonts, spacing, borders, and even add animations to enhance user experience.
- What is the difference between dropdown and list?
A dropdown menu is initially hidden and appears only when activated, offering a dynamic selection of options. In contrast, a list is typically visible at all times, presenting a static display of items without requiring user interaction to reveal them.
- How many types of dropdowns are there?
There are primarily two types: hover dropdowns, which appear when users hover over the trigger and click dropdowns, which require users to click on the trigger to reveal the options. Each type has its own interaction pattern and use case.
Mukesh
Working with upGrad as a Senior Engineering Manager with more than 10+ years of experience in Software Development and Product Management.
Talk to Career Expert
upGrad Learner Support
Talk to our experts. We’re available 24/7.
Indian Nationals
1800 210 2020
Foreign Nationals
+918045604032
Disclaimer
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enrolling. upGrad does not make any representations regarding the recognition or equivalence of the credits or credentials awarded, unless otherwise expressly stated. Success depends on individual qualifications, experience, and efforts in seeking employment.
upGrad does not grant credit; credits are granted, accepted or transferred at the sole discretion of the relevant educational institution offering the diploma or degree. We advise you to enquire further regarding the suitability of this program for your academic, professional requirements and job prospects before enr...