How to move the arrow button (leaving the slider in the css)?

Make a slider similar to this
https://ruseller.com/lessons.php?rub=2&id=1082
and everything worked as it should.

But need to change the layout (the position property). (Sorry, I had to.)
As a result, the arrow button (div) is not shifted together with the main wonder (which appears when you hover over this button).

How to make moving and div and a button close, as if it is attached to the edge of a diva?
My code
https://jsfiddle.net/vb88mfzy/1/

---------------------------------------
My code (the rules oblige to put here)
html
<div id="GRAPH1_container"></div><div class="GRAPH1_graph_menu_slider">
<div class="graph_menu_slider">
<div class="arrow_menu_button_1"><div class="arrow_right_menu_button_1_in"></div></div>
<div class="graph_menu_slider_inner">
<div class="graph_menu_content ui_panel_1">
1111
</div>
</div>
</div>
</div>


css
.graph_menu_slider {
z-index:2;
position: absolute; /*this is what had to change*/
top: 50%;
left: 0;


-webkit-transition-duration: 0.3 s;
-moz-transition-duration: 0.3 s;
-o-transition-duration: 0.3 s;
transition-duration: 0.3 s;
}

.graph_menu_slider_inner {
position: absolute; /*this is what had to change*/
left: -424px;
 margin-top:-18vh; 

-webkit-transition-duration: 0.3 s;
-moz-transition-duration: 0.3 s;
-o-transition-duration: 0.3 s;
transition-duration: 0.3 s;
}
.graph_menu_slider:hover {
left: 0px;

}
.graph_menu_slider:hover .graph_menu_slider_inner {
left: 0px;
}


.graph_menu_content
{
width:400px;
height:20vh;
border: 2px solid #F0F0F0 !important;
}



/* The following registration*/

.ui_panel_1
{
padding: 10px;
background: #222A37;
border: 1px solid #383838;
color:#CDCFD2;
font-family: Arial;
font-size: .875rem;
vertical-align: middle;
}


.arrow_right_menu_button_1_in {
background: #0C7ECB;
width:1.8 rem;
height:1.9 rem;
content:";
clip-path: polygon(0 34%, 50% 80%, 100% 34%, 80% 34%, 50% 60%, 20% 34%);
transform: rotate(-90deg);
}


.arrow_menu_button_1{
border: 0.0625 rem solid #00AEFF; /* 1px */
background: #171B23;
cursor:pointer;
width:2.0 rem;
padding: 0.4 rem;
text-decoration: none;
transition-property: background;
transition-duration: 100ms;
transition-timing-function: ease;
transition-delay: 0s; 
vertical-align: middle;
}
.arrow_menu_button_1:hover {
border: 0.0625 rem solid #00AEFF; /* 1px */
background: #0E1015;
}
June 5th 19 at 21:31
1 answer
June 5th 19 at 21:33
Solution
Thank you. In the me (and you) example on jsfiddle - it works.
In real code there because there are a lot of different css (this is my error because I should write here all the code. I had hoped that and so would work, but no. - johnnie55 commented on June 5th 19 at 21:36

Find more questions by tags CSSHTMLLayout