How to make dropdown menu hover and arrow up using pure css?

Question

How to make dropdown menu hover using pure css without javascript? So, when button hover, dropdown will appear with arrow up. like this:

Answer 1

 .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; margin-bottom: 7px; } .dropdown { position: relative; display: inline-block; } .dropdown-content:before { position: absolute; top: -7px; right: 29px; display: inline-block; border-right: 7px solid transparent; border-bottom: 7px solid green; border-left: 7px solid transparent; border-bottom-color: yellow; content: ''; } .dropdown-content:after { position: absolute; top: -6px; right: 30px; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid green; border-left: 6px solid transparent; content: ''; } .dropdown-content { display: none; position: absolute; right: 0; background-color: #f9f9f9; min-width: 160px; } .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: red; } 

 <div class="dropdown" style="float:right;"> <button class="dropbtn">Right</button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div>