Advanced Dropdowns

CSS Right-aligned Dropdown

<button class="dropbtn">Left</button>

Link 1) Link 2) Link 3)

<button class="dropbtn">Right</button>

Link 1) Link 2) Link 3)

If you want the dropdown menu to go from right to left, instead of left to right, add right: 0;

Example

.dropdown-content {
  right: 0;
}

CSS Dropdown Image

How to add an image and other content inside the dropdown box.

Example

Hover over the image:

<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">

<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200"> Beautiful Cinque Terre

CSS Dropdown Navbar

How to add a dropdown menu inside a navigation bar.

Example

<iframe src="trycss_dropdown_navbar.htm" style="width:100%;border:none;height:200px"></iframe>