How to create dropdown menu in css

How TO — Dropdown Navbar

Create a dropdown menu that appears when the user moves the mouse over an element inside a navigation bar.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Navbar container */
.navbar overflow: hidden;
background-color: #333;
font-family: Arial;
>

/* Links inside the navbar */
.navbar a float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* The dropdown container */
.dropdown float: left;
overflow: hidden;
>

/* Dropdown button */
.dropdown .dropbtn font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
>

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn background-color: red;
>

/* 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 float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
>

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover background-color: #ddd;
>

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

Example Explained

We have styled the navigation bar and the navbar links with a background-color, padding, etc.

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class is the container for .dropdown-content . Since this is a element, and not an element, we have to float it to make sure that it stays next to the links.

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this.

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Clickable Dropdown in Navbar

Example

Tip: Go to our CSS Dropdowns Tutorial to learn more about dropdowns.

Tip: Go to our Clickable Dropdowns to learn more about clickable dropdowns

Tip: Go to our CSS Navbar Tutorial to learn more about navbars.

Tip: Go to our Responsive Top Navigation to learn about how to create a responsive navbar.

Источник

How TO — Hoverable Dropdown

Learn how to create a hoverable dropdown menu with CSS.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

/* The container — 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: #f1f1f1;
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

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Источник

CSS Dropdowns

Create a dropdown box that appears when the user moves the mouse over an element.

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;
>

Example Explained

HTML) Use any element to open the dropdown content, e.g. a , or a element.

Use a container element (like ) to create the dropdown content and add whatever you want inside of it.

Wrap a element around the elements to position the dropdown content correctly with CSS.

CSS) The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown content. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the CSS box-shadow property to make the dropdown menu look like a «card».

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Dropdown Menu

Create a dropdown menu that allows the user to choose an option from a list:

This example is similar to the previous one, except that we add links inside the dropdown box and style them to fit a styled dropdown button:

Example

/* The container — 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

/* 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;
>

Источник

How to create a dropdown menu in HTML using CSS?

A dropdown menu is a way of letting the user explore different options available to him/her when using a website. These are somewhat a necessary widget when designing a website. CSS lets you create good-looking dropdown menus that make overall boost the user experience and beautify the look of your website. This post is comprised to provide:

Creating a dropdown box

Often you must have seen that when you bring your mouse cursor over a piece of text or a button on a website a dropdown box appears. Here is how it is done.

This example demonstrates the creation of a dropdown box.

To make a dropdown box, first of all we made a div container to place the content of the dropdown box inside it, moreover, to open the dropdown box we have used a element.

The “dropdown” class has been assigned to the first div container that nests the whole the content. We have set its position to relative so that when the dropdown opens, it is placed right below the button.

The div container that contains the dropdown content has been assigned the “dropdown-content” class. We have set the display to none, moreover, given it some width and padding.

.dropdown : hover .dropdown-content {

Furthermore, to make the dropdown hoverable we assigned it the :hover state and set its display to block so that it appears below the button.

And lastly, we have styled our button as well according to our desire.

A dropdown box has been successfully created. Now let’s move to creating a dropdown menu.

Creating a dropdown menu

A dropdown menu consists of a list of options and it only opens when a user brings the mouse cursor over it. You can create dropdown menu on your website using CSS. Follow the example below.

Here we added anchor tags to provide multiple options in the dropdown menu.

Firstly we our giving our button some style using various CSS properties.

As already explained above, we have set the position of the div with the “dropdown” class to relative so that when the dropdown opens, it is placed right below the button.

Here we are using some basic CSS properties to style our dropdown content.

IN the above CSS code, we are styling the links present inside the dropdown menu. We have set their display to block so that each link appears on a new line.

.dropdown : hover .dropdown-content {

Here we are styling the hover effects for the menu button and dropdown menu.

This is how you can create a dropdown menu successfully.

Conclusion

A dropdown menu provides a user different options available to him/her when using a website. You can create these dropdown menus using different CSS properties. For the purpose of creating a basic dropdown box you can use a div container and place the dropdown content inside it, furthermore, using CSS properties you can give it some style. Once you have learned how to create a basic dropdown box you can use similar techniques to create a dropdown menu. This guide teaches you how to create a dropdown menu with the help of an appropriate example.

About the author

Naima Aftab

I am a software engineering professional with a profound interest in writing. I am pursuing technical writing as my full-time career and sharing my knowledge through my words.

Источник