純粋なCSSを使用してドロップダウンメニューのホバーと矢印を上に移動するにはどうすればいいですか？

Question

javascriptなしで純粋なCSSを使用してドロップダウンメニューをホバーする方法は？ ボタンをホバーすると、ドロップダウンが矢印の上に表示されます。このような ：

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>