CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Dropdowns

Dropdown menus are contextual menus for displaying links in a list format.


Basic Dropdown

Create a simple dropdown that appears when the user moves the mouse over an element:

Run code

Dropdown Menu

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

Run code

Adding Caret to Button

The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown:

Run code

Dropdown Menu Divider

Add class .divider to separate links inside the dropdown menu with a horizontal border:

Run code

Dropdown Menu Header

You can add a header in any dropdown menu by using the .dropdown-header class:

Run code

Active and Disable Items

You can customize menus by using .active or .disabled classes to indicate active and disable state of a menu item:

Run code

The pointer-events property specifies whether or not an element can become the target of mouse events:


Dropup Menu

If you want the dropdown menu to expand upwards instead of downwards use bottom:100% instead of top:100% :

Run code

Dropdown Navbar

The following example shows how to add a dropdown menu inside a navigation bar:

Run code