html - 如何使用纯 CSS 使下拉菜单悬停和向上箭头？

Question

如何使用纯 css 而不使用 javascript 使下拉菜单悬停？ 因此，当按钮悬停时，下拉菜单将出现并带有向上箭头。 像这样:

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>