How to Transform a CSS Drop-Down Menu into a Drop-Up Menu?

Drop-up submenu of vertical drop-down menu: implemented with pure CSS

For drop-down menu, transformed into drop -up menus are common, especially when the menu bar is at the bottom of the layout. To achieve this, we need to make some changes to the CSS styles.

Question: Convert drop-down menu to drop-up menu

Given drop-down menu CSS, how to modify the style so that it becomes drop -up menu?

Solution: Adjust #menu:hover ul li:hover ul rule

Can be done by adding bottom: 100%; attribute to #menu:hover ul li:hover ul rules to implement the drop-up function.

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

Optional improvement: only apply drop-up to top-level submenus

To prevent submenus from also applying drop-up For effect, you can add the following rules:

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

Other considerations: Restore borders

Adding the bottom: 100%; attribute may remove the border of the submenu. To restore the border, you can add the following attributes:

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

Demonstration

Here are some examples that demonstrate this technique:

• [ Demo 1](https://jsfiddle.net/W5FWW/4/)
• [Demo 2](https://jsfiddle.net/zyp6c/)
• [Demo 3](https ://jsfiddle.net/phkj20zo/)

The above is the detailed content of How to Transform a CSS Drop-Down Menu into a Drop-Up Menu?. For more information, please follow other related articles on the PHP Chinese website!