Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
html5
web development
communitycreator

How to create a simple drop-up with HTML and CSS

NDUKWE CHIDERA K.

Overview

With HTMLHyperText Markup Language and CSSCascade Style Scaling code, you can easily create a drop-up menu. A drop-up menu is like a drop-down, except that the drop menu displays on top of the trigger element.

So, in this shot, we will be looking at how to achieve a drop-up menu like the one in this image below:

We will create this with HTML and CSS codes. If you hover your mouse over the button "dropup", it displays the content of the div, which holds the list items link1, link2 and link3 above the dropup button.

Creating a drop-up menu

Explanation

  • In the code, some <p> tags were added to let us see the drop-up.

  • A button was added and styled with a background color.

  • The .dropup class was given a position: relative style. This is to let the dropup-content be placed on top of it using position: absolute.

  • The .dropup-content class which contains the actual drop-up menu is hidden by default using the display: none, and it will be displayed upon hovering.

  • The width of the drop-content element set in the style can be adjusted to fit your taste, and if set to 100%, it will have the same width as the drop-up button.

  • Because there is a need for the drop-up menu to be in front of any content on the page, it was given a z-index of 1. The box-shadow was used instead of the border to give the drop-up menu some form of depth to it.

  • Finally, the :hover selector is used to show the drop-up menu when the user moves the mouse over the drop-up button.

RELATED TAGS

css
html5
web development
communitycreator
RELATED COURSES

View all Courses

Keep Exploring