How to create a float dropdown list in perspective

Ignition
,
1

I want to use perspective to make below effect:

When the mouse is hover on a label (or button) component, it will display a dropdown list for this label (or button), when the mouse leaves this label(or button), the dropdown list will hide automatically. This is a common UI style in web development.

example as below：

image
image1150×423 40.6 KB

Any one can share idea for how to make it in perspective?

2

I would think using a Markdown component would probably be the simplest. here’s an example I snagged from w3schools

<style>
.dropdown {
   position: relative;
}

  
.dropbtn {
   background-color: #4CAF50;
   color: white;   padding: 16px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}
  
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 200px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
}

.dropdown-content a:hover {
   background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
   display: block;
}

.dropdown:hover .dropbtn {
   background-color: #3e8e41;
}
</style>

/* replace with your links*/
<div class="dropdown">
  <button class="dropbtn">Dropdown Menu</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>