На странице есть элемент:
<div class="trading__data-item increase">
<div class="trading__data-item__prefs"><span></span><span></span><span></span></div>
<div class="trading__data-title">Currency</div>
<div class="trading__data-balance">Value</div>
<div class="trading__data-state">0</div>
</div>
Css:
.trading__data-item {
position: relative;
border:1px solid #272E3D;
border-radius: 5px;
padding: 10px 25px 16px 16px;
margin-left: 13px;
width: 225px;
height: 96px;
}
.trading__data-item__prefs {
position: absolute;
right: 0;
top: 5px;
width: 20px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.trading__data-item__prefs span {
height: 4px;
width: 4px;
background-color: #45506A;
border-radius: 50%;
margin-bottom: 2px;
display: block;
}
.trading__data-item__prefs:hover span {background-color: #aaa;}
.trading__data-item__prefs span:last-child {
margin-bottom: 0;}
https://jsfiddle.net/L8cp39u6/
Как сделать выпадающий список при клике на 3 точки, в правом верхнем углу блока? Т.е я кликаю на 3 точки, у меня появляется список, и при выборе определенного элемента из списка - я записываю нужное мне значение в блок <div class="trading__data-balance">
Что-то типо этого:
<div class="trading__data-balance">
такое-то значение