我怎样才能使下拉按钮响应

Question

我需要两个下拉按钮的响应能力方面的帮助，当它打开时，按钮在文本上方，我希望它是那样的，但我不知道如何让它响应，这是通过command (position: absolute;) 放在文字上方，问题是当按钮打开时，那个按钮里面的文字在打开时不会缩小，一直保持不变，不好看，

<style>
* {
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    width: 1300px;
}

.dropdown {
    border: #fff solid 10px;
    float: left;
    width: 50%;
}

.dropdown .dropbtn {
    background-color: #86c232;
    border: none;
    width: 100%;
    padding: 15px;
}

.dropdown-content_brand {
    display: none;
    position: absolute;
    background-color: #ddd;
    width: 1280px;
    z-index: 999;
}

.dropdown_container:after {
    content: "";
    display: table;
    clear: both;
}

.dropdown-content_brand a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content_brand {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}

.btn {
    border: none;
    text-align: center;
    background: none;
    color: #000;
    font-size: 18px;
    float: left;
    padding: 10px 15px;
    width: 25%;
}

.btn_show_brand {
    background-color: #86c232;
    border: none;
    font-size: 18px;
    padding: 10px 15px;
    margin: 10px;
    width: 96.5%;
    float: left;
}
</style>



<div class="dropdown_container">

    <div class="dropdown">
        <button class="dropbtn">Brand</button>
        <div class="dropdown-content_brand">
            <div class="btn_show"> <button class="btn_show_brand active" onclick="filterSelection('all')"> Show all</button> </div>
            <div class="btn" onclick="filterSelection('sram')">SRAM</div>
            <div class="btn" onclick="filterSelection('shimano')">SHIMANO</div>
            <div class="btn" onclick="filterSelection('rockshox')">ROCKSHOX</div>
            <div class="btn" onclick="filterSelection('magura')">MAGURA</div>
        </div>
    </div>

</div>