# 
## Overview

With #key# HTML: HyperText Markup Language #key# and #key# CSS: Cascade Style Scaling #key# 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:




![](/api/edpresso/shot/5943804850339840/image/6131836547235840) 

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.

<html>
<head>
</head>
<body>
   <div id="content"/>
      <div class="initials">
       <h2>See Hoverable Dropup Btn Below</h2>
       <p>just a paragraph...</p>
       <p>just a paragraph...</p>
       <p>Move the mouse over the button to open the dropup menu.</p>
      <div>
      <div class="dropup">
        <button class="dropbtn">Dropup</button>
        <div class="dropup-content">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
      </div>  
    </div> 
</body>
</html>

 /* Dropup Button */
      .initials{
        font-size:medium;
        padding-bottom:5px;
      }
      .dropbtn {
        background-color: #3498DB;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        top:50%;
      }

      /* The container <div> - needed to position the dropup content */
      .dropup {
        position: relative;
        display: inline-block;
      }
 
      /* Dropup content (Hidden by Default) */
      .dropup-content {
        display: none;
        position: absolute;
        bottom: 50px;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
      }

      /* Links inside the dropup */
      .dropup-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
      }

      /* Change color of dropup links on hover */
      .dropup-content a:hover {background-color: #ddd}

      /* Show the dropup menu on hover */
      .dropup:hover .dropup-content {
        display: block;
      }

      /* Change the background color of the dropup button when the dropup content is shown */
      .dropup:hover .dropbtn {
        background-color: #2980B9;
      } 


codemirror

# 
## 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`.

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

HTML and CSS create a drop-up menu, displaying above the trigger. Use classes for positioning and hovering effects.

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

Overview

Creating a drop-up menu

Explanation