...

Web Technologies - CSS

Back to Course

Lesson Description


Lession - #189 CSS Dropdowns


Dropdown Menu for Beginners

When the user moves the mouse over an element, a dropdown box opens.


<!DOCTYPE html>
<html>
<head>
<style>
  body{
  background-color: #ffff66;
  }
  
.dropdown {
  position: relative;
  display: inline-block
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #a4f4f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2>
; padding: 12px 16px; z-index: 1; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <h2>Hoverable Dropdown</h2> <p>Move the mouse over the text below to open the dropdown content.</p> <div class="dropdown"> <span>Mouse over me</span> <div class="dropdown-content"> <p>Hello World!</p> </div> </div> </body> </html>



Output:
Sorry cannot be displayed
Try it here


Explaination of Example

HTML>
To open the dropdown content, use any element, such as an or an element.
To make the dropdown content, use a container element (like>
and fill it with whatever you wish.
To place the dropdown content correctly with CSS, wrap an element around the items.

CSS>
The.dropdown class employs position:relative, which is required when the dropdown content is to be positioned directly behind the dropdown button (using position:absolute>
.
The real dropdown content is stored in the.dropdown-content class. By default, it is hidden, but it will appear when you hover over it (see below>
. It's worth noting that the min-width is set to 160px. You are allowed to alter this. Set the width of the dropdown content to 100% if you want it to have the same width as the dropdown button (and overflow:auto to enable scroll on small screens>
.
To make the dropdown menu look like a "card," we utilised the CSS box-shadow property instead of a border.
When the user slides the mouse over the dropdown button, the:hover selector is utilised to display the dropdown menu.


Menu with Dropdowns

Create a dropdown menu that allows the user to select from a list of options:
We add links inside the dropdown box and design them to fit a styled dropdown button in this example, which is similar to the previous one:


<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
  background-color: #39ff14;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  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-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } .dropdown:hover .dropbtn { background-color: #9932cc; } </style> </head> <body> <h2>Dropdown Menu</h2> <p>Move the mouse over the button to open the dropdown menu.</p> <div class="dropdown"> <button class="dropbtn">Dropdown</button> <div class="dropdown-content"> <a href="#">Red</a> <a href="#">Yellow</a> <a href="#">Pink</a> </div> </div> </body> </html>



Output:
Sorry cannot be displayed
Try it here