I set the position:fixed parameter to li so that when scrolling, they "go" to the block in which they are located, but as a result, when applying position:fixed , all li are mixed in a heap so that only one last button is visible:
ul { padding-top: 11px; } .spisok { height: 100px; width: 238px; background-color: #7B2019; /*margin-top: -73%;*/ /*border*/ border-bottom: 0px solid #000; border-left: 0px solid #000; border-right: 15px solid #000; /*border ends*/ } .spisok li { width: 195px; height: 45px; display: block; margin-right: 10px; margin-left: 13.2px; position: fixed; background-image: url(../img/span_menu.png); color: rgba(222, 222, 222 .1); background-size: cover; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; -ms-transition: All 0.3s ease-in-out; transition: All 0.3s ease-in-out; } .spisok li a { width: 100%; height: 100%; text-decoration: none; font-family: CyrillicOldBold, sans-serif; letter-spacing: 0.5px; color: white; text-decoration: none; font-size: 16px; font-weight: normal; position: relative; display: list-item; text-align: -webkit-match-parent; text-align: center; padding-left: 9px; } .spisok ul>li:hover { background-image: url(../img/span_menu_hover.png); background-repeat: no-repeat; background-size: cover; -webkit-transition: All 0.3s ease-in-out; -moz-transition: All 0.3s ease-in-out; -o-transition: All 0.3s ease-in-out; -ms-transition: All 0.3s ease-in-out; transition: All 0.3s ease-in-out; } .spisok ul li>a:hover { text-shadow: gold 0 0 40px; /* Свечение голубого цвета */ color: white; } .spisok ul li ap { padding-top: 14px; margin-top: 5px; } .text-div { width: 158px; height: 30px; text-align: center; margin-left: -9px; } .letter-spacing { letter-spacing: 1px; } <div class="spisok"> <ul> <li> <a class="text-div" id="oblacheniya" href="http:///test.ru/left_menu/oblacheniya.php"> <p><span class="letter-spacing">Облачения</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/podrizniki.php"> <p><span class="letter-spacing">Подризники</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/stihari.php"> <p><span class="letter-spacing">Стихари</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/ryasi.php"> <p><span class="letter-spacing, ryasi">Рясы</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/podryasniki.php"> <p><span class="letter-spacing">Подрясники</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/golovniye_ubori.php"> <p><span class="letter-spacing">Головные уборы</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/for_monahov.php"> <p><span class="letter-spacing">Для монахов</span></p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/kresh_nabory.php"> <p>Крещальные наборы</p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/vench_nabory.php"> <p>Венчальные наборы</p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/obl_for_hrama.php"> <p>Облачения для храма</p> </a> </li> <li> <a class="text-div" href="http:///test.ru/left_menu/vishitiye_kresty.php"> <p><span class="letter-spacing">Вышитые кресты</span></p> </a> </li> <li id="ugol"> <a class="text-div" href="http:///test.ru/left_menu/ugol.php"> <p><span class="letter-spacing">Кадильный уголь</span></p> </a> </li> </ul> </div> 
li- vp_arthPHPand clog them with plugs if needed. 2) Paste in one snippet, it makes no sense to divide into two. - user207618