How Can I Make a Pure CSS Drop-Down Menu Open Upward Instead of Downward?

Drop-down Menu that Opens Upward with Pure CSS

Pure CSS drop-down menus are an excellent way to navigate websites intuitively. However, in some designs, you may want the menu to open upward instead of downward. Here's how you can achieve this purely through CSS:

The Problem:
You have a drop-down menu with CSS that opens downward, but you want to change it to open upward, preserving its position and functionality.

The Solution:
To make the drop-down menu open upward, you need to modify the CSS rule that positions the submenus. Here's how:

Option 1: Adjust the Margin-top

#menu:hover ul li:hover ul {
  ...
  margin-top: -22px;
}

Change it to:

#menu:hover ul li:hover ul {
  ...
  margin-top: 1px;
  bottom: 100%;
}

By adding bottom: 100%;, you'll force the submenu to appear above the parent menu item.

Option 2: Target Specific Submenus

If you don't want all submenus to open upward, you can target specific ones using this rule:

#menu>ul>li:hover>ul { 
    bottom:100%;
}

Option 3: Alternative Demo

#menu:hover ul li:hover ul {
    position: absolute;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
    border-bottom: 1px solid transparent
}

This alternative approach retains the border on the submenu.

By implementing these CSS modifications, you can effortlessly convert your downward-facing pure CSS drop-down menu into an upward-facing one. Remember to adjust the margin values as needed to suit your design.

The above is the detailed content of How Can I Make a Pure CSS Drop-Down Menu Open Upward Instead of Downward?. For more information, please follow other related articles on the PHP Chinese website!