Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Dropdowns

10 minutes

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Dropdowns

Create a dropdown menu that expands when hovered over, using CSS.

Basic Dropdown

Craft a dropdown box that is triggered to appear when the user hovers over an element with their mouse.

Example

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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>

<div class=”dropdown”>
  <span>Mouse over me</span>
  <div class=”dropdown-content”>
    <p>Hello World!</p>
  </div>
</div>

Example Explained

HTML) Utilize any element such as <span> or <button> to trigger the dropdown content.

Utilize a container element (e.g., <div>) to enclose the dropdown content and include any desired content inside it.

Wrap a <div> element around the elements to appropriately position the dropdown content using CSS.

CSS) The .dropdown class employs position: relative, necessary for placing the dropdown content directly beneath the dropdown button using position: absolute.

The .dropdown-content class contains the actual dropdown content, initially hidden and revealed on hover (refer below). Note the min-width set to 160px, which can be adjusted as needed. Tip: To match the width of the dropdown content with the dropdown button, set the width to 100% (and overflow:auto to enable scrolling on smaller screens).

Instead of utilizing a border, CSS box-shadow property is applied to render the dropdown menu resembling a “card”.

The :hover selector is employed to display the dropdown menu when the user hovers over the dropdown button.

Dropdown Menu

Develop a dropdown menu enabling the user to select an option from a list.

This example is akin to the preceding one, with the inclusion of links within the dropdown box, styled to complement a customized dropdown button.

Example

/* The container <div> – needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>

<div class=”dropdown”>
  <button class=”dropbtn”>Dropdown</button>
  <div class=”dropdown-content”>
    <a href=”#”>Link 1</a>
    <a href=”#”>Link 2</a>
    <a href=”#”>Link 3</a>
  </div>
</div>

Right-aligned Dropdown Content

To orient the dropdown menu from right to left instead of left to right, append right: 0; to the CSS properties.

Example

.dropdown-content {
right: 0;
}