配置したパーツの動きに連動させて周囲のパーツの動きを指定したい

前提・実現したいこと

画面左上に配置したボタンを押すと背面に指定した画像が下に下がりメニューが出ます。
その下に配置を予定してる「ホバー(1-11)」というボタンをその動きに対して一緒に下にずれるようにしたい。
ホバーのボタンはすべて縦並びにしたい（現在配置しているのはかなりの数が重なっているがサンプル的に多めに配置しているだけです。）

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

該当のHTMLソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <meta name="viewport" content="width=device-width"> <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function(){ $(".button-on").click(function(){ $(".area1").slideToggle(); }); }); </script> <link rel="stylesheet" href="../style.css"> </head> <body class="top"> <div class="box1"> <div class="site"> <h1><a href="#">サンプル</a></h1> <button type="button" class="button-on"><i class="fas fa-align-justify"></i></button> <div class="area-big"> <ul class="area1"> <li><a href="" class="">sample1</a></li> <li><a href="" class="">sample2</a></li> <li><a href="" class="">sample3</a></li> <li><a href="" class="">sample4</a></li> <li><a href="" class="">sample5</a></li> </ul> </div> </div> </div> <div class="botan"> <div class="A">hover1</div> <div class="B">hover2</div> <div class="C">hover3</div> <div class="D">hover4</div> <div class="E">hover5</div> <div class="F">hover6</div> <div class="G">hover7</div> <div class="H">hover8</div> <div class="I">hover9</div> <div class="J">hover10</div> <div class="K">hover11</div> <div class="wrapper"> <div class="contents"> <img src="" alt=""> <img src="" alt=""> <img src="" alt=""> </div> </div> </div> <div class="box5"> <div class="box5-inner"> <div class="copyright"> <p>Copyright © 123456</p> </div> </div> </div> </body> </html>

該当のCSSソースコード

.A,.B,.C,.D,.E,.F,.G,.H,.I,.J,.K,.L{

	border: 3px solid #92e0cb;
	margin: 3px;
　　　　　　　width: 200px;
　　　　　　height: 50px;
　　　　　　line-height: 50px;
　　　　　　text-align: center;
　　　　　　color: #ffffff;
　　　　　　background: rgba(0,0,0,0.4);
　　　　　　cursor: pointer;

}

.A {position: absolute;}
.B {position: absolute;}
.C {position: absolute;}
.D {position: absolute;}
.E{position: absolute;}
.F{position: absolute;}
.G{position: absolute;}
.H{position: absolute;}
.I{position: absolute;}
.J{position: absolute;}
.K{position: absolute;}
.L{position: absolute;}

.wrapper {
width: 100%;
height: 100%;
}
.contents {
background-image: url(pickup/img/5-1920-1080.jpg);
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
width: auto;
height: 1080px;
}

.A:hover ~ .wrapper .contents {
background-image: url(pickup/img/1-1920-1080.jpg);
}
.B:hover ~ .wrapper .contents {
background-image: url(pickup/img/2-1920-1080.jpg);
}
.C:hover ~ .wrapper .contents {
background-image: url(pickup/img/3-1920-1080.jpg);
}

.D:hover ~ .wrapper .contents {
background-image: url(pickup/img/1.jpg);
}

.E:hover ~ .wrapper .contents {
background-image: url(pickup/img/2.jpg);
}

.F:hover ~ .wrapper .contents {
background-image: url(pickup/img/3.jpg);
}

.G:hover ~ .wrapper .contents {
background-image: url(pickup/img/4.jpg);
}
.H:hover ~ .wrapper .contents {
background-image: url(pickup/img/5.jpg);
}
.I:hover ~ .wrapper .contents {
background-image: url(pickup/img/6.jpg);
}
.J:hover ~ .wrapper .contents {
background-image: url(pickup/img/7.jpg);
}
.K:hover ~ .wrapper .contents {
background-image: url(pickup/img/8.jpg);
}
.L:hover ~ .wrapper .contents {
background-image: url(pickup/img/9.jpg);
}

.button-on {position: absolute;
top: 1.5%;
left: 10%;
font-size: 160%;
color: #595c63;
padding: 6px 12px;
border-radius: 60%;
cursor: pointer;}
.button-on:hover {background-color: #8ce2fa}
.button-on:focus {outline: none;}
.area1 {list-style: none;}

試したこと

absoluteにて親要素(画面背後に表示した画像の左上あたりが基準値点になります。)の基準位置にとりあえずすべて配置しTOPやleftにてそれぞれpxや%で位置を決める
その後左上のメニュボタンで動作確認
「ホバー1-11」のボタンの位置はそのまま変わらず背景の画像だけ下がる状態
absolute使わずに配置するもやはり同様の動作

afterを利用してみましたがうまくいかずの状態でした、指定の仕方がダメなのかもしれなかったですが。

以下2点の解決方法を教えていただきたいです。
1.可能であれば「ホバー〇」がクラス指定から一気に縦並びになるようにしたい
2.1で配置したポジションから左上ボタン押しした際に背景画像に連動して下に下がるようにしたい