Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to Add Image into Dropdown List for each items?
Adding images to dropdown list items enhances the visual appeal and user experience of your web application. This technique uses HTML structure combined with CSS hover effects to create an interactive dropdown menu where each option displays both an icon and text.
Syntax
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: color;
}
Example: Car Selection Dropdown
The following example creates a dropdown menu with car brands, each accompanied by a representative icon
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
margin: 20px;
}
.dropdown-btn {
background-color: #3498db;
color: white;
padding: 12px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 200px;
border-radius: 5px;
box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
z-index: 1;
top: 100%;
left: 0;
}
.dropdown-content a {
color: #333;
padding: 12px 16px;
text-decoration: none;
display: flex;
align-items: center;
border-bottom: 1px solid #f0f0f0;
transition: background-color 0.3s;
}
.dropdown-content a:last-child {
border-bottom: none;
border-radius: 0 0 5px 5px;
}
.dropdown-content a:first-child {
border-radius: 5px 5px 0 0;
}
.dropdown-content img {
width: 24px;
height: 24px;
margin-right: 12px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a:hover {
background-color: #f8f9fa;
}
.dropdown:hover .dropdown-btn {
background-color: #2980b9;
}
</style>
</head>
<body>
<div style="text-align: center; padding: 20px;">
<h2>Select Your Favorite Car Brand</h2>
<div class="dropdown">
<button class="dropdown-btn">Choose Car Brand ?</button>
<div class="dropdown-content">
<a href="#">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5H6.5c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E" alt="Mercedes"/>
Mercedes-Benz
</a>
<a href="#">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF6B35'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5H6.5c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E" alt="BMW"/>
BMW
</a>
<a href="#">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD700'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5H6.5c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E" alt="Lamborghini"/>
Lamborghini
</a>
<a href="#">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DC143C'%3E%3Cpath d='M18.92 6.01C18.72 5.42 18.16 5 17.5 5H6.5c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z'/%3E%3C/svg%3E" alt="Porsche"/>
Porsche
</a>
</div>
</div>
</div>
</body>
</html>
A blue dropdown button labeled "Choose Car Brand ?" appears. When hovered, a dropdown menu displays with four car brands (Mercedes-Benz, BMW, Lamborghini, Porsche), each with a colored car icon. The dropdown has a clean white background with subtle shadows and smooth hover effects.
Key Points
Flexbox Alignment: Using display: flex and align-items: center ensures images and text are perfectly aligned within each dropdown item.
Hover Effects: The :hover pseudo-class creates smooth transitions for both the dropdown visibility and item highlighting.
Positioning: The dropdown content uses position: absolute to appear below the button without affecting page layout.
Conclusion
This approach creates professional-looking dropdown menus with images using pure CSS. The combination of hover effects, proper positioning, and flexbox alignment ensures a smooth user experience across different browsers.
Updated on: 2026-03-15T15:47:30+05:30
8K+ Views
Advertisements