How Can I Create an Upward-Opening Dropdown Menu Using Only CSS?

Drop-down Menu That Opens Upward with Pure CSS

The challenge of converting a drop-down menu to an upward-opening "drop-up" menu solely using CSS requires a slight modification to its styling. The proposed CSS below will achieve this effect:

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

Explanation

By adding bottom: 100%; to the above rule, the submenus will be positioned at the bottom of their parent menu items and appear to "drop up" when hovered over.

Additional Refinements

For a more refined effect, you can remove the overlap between submenus by adding:

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

This ensures that only the submenu of the hovered menu item will open upward.

Demo

To experience the drop-up effect, you can refer to the following demo: http://jsfiddle.net/W5FWW/4/.

Retaining Border

If the original menu had a border, you can restore it by adding:

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

This will retain the border while preserving the drop-up functionality.

The above is the detailed content of How Can I Create an Upward-Opening Dropdown Menu Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!