How Can I Create a CSS Drop-Up Menu Instead of a Drop-Down Menu?

Drop-down Menu with Pure CSS

This article discusses the customization of a drop-down menu created with pure CSS to make it a "drop-up" menu instead of a "drop-down" one. The menu bar is located at the bottom of the layout, and the question is how to make it open upward.

Solution

To create a drop-up menu, the CSS rules need to be adjusted.

Demo 1:

Add bottom: 100%; to the existing CSS rule:

#menu:hover ul li:hover ul {
    bottom: 100%; /* added this attribute */
}

Demo 2:

To prevent submenus from being affected by the drop-up behavior, use this rule:

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

Demo 3:

To restore the border around the drop-up menu:

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

Here is a JSFiddle demo: http://jsfiddle.net/W5FWW/4/

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