Question

Вопрос следующий. Есть вертикальное меню сайта выпадающее. Выпадает при наведении мышкой на него. Как сделать так, чтобы оно было всегда раздвинуто или скрыто? А по нажатии на заголовок раздела сворачивалось или наоборот раскрывалось?

<div class="menu">
<a href="/">Главная страница</a>
<a href="/load">Файловый архив</a>      
<div class="link_drop">
<a href="/load/pro_evolution_soccer_2019/8" class="link_drop_top">Pro Evolution Soccer 2019</a>
<a href="/load/pro_evolution_soccer_2019/patchi_mody_i_grafika_dlja_pes_2019/9">Патчи, моды и графика</a>
<a href="/load/pro_evolution_soccer_2019/utility_programmy_i_soft_dlja_pes_2019/17">Программы и утилиты</a>
<a href="/load/pro_evolution_soccer_2019/formy_komand_dlja_pes_2019/11">Формы команд</a>
<a href="/load/pro_evolution_soccer_2019/lica_igrokov_dlja_pes_2019/12">Лица игроков</a>
<a href="/load/pro_evolution_soccer_2019/butsy_futbolistov_dlja_pes_2019/14">Бутсы футболистов</a>
<a href="/load/pro_evolution_soccer_2019/stadiony_i_gazony_dlja_pes_2019/13">Стадионы и газоны</a>
<a href="/load/pro_evolution_soccer_2019/futbolnye_mjachi_dlja_pes_2019/15">Футбольные мячи</a>
<a href="/load/pro_evolution_soccer_2019/bannery_shhity_i_flagi_dlja_pes_2019/16">Баннеры и флаги</a>
<a href="/load/pro_evolution_soccer_2019/muzyka_kommentatory_i_krichalki_dlja_pes_2019/10">Комментаторы и кричалки</a>
</div>
</div>

.menu {width: 100%; overflow: hidden;}
 .menu a {height: 30px; line-height: 30px; padding: 0 5%; display: block; box-shadow: 4px 0 0 0 #373f52 inset; background: #fff; border-bottom: 1px solid rgba(34,34,34,.25); color: #373f52; font-size: 14px; font-family: 'Open Sans', Tahoma, sans-serif; text-decoration: none;}
 .menu a:hover {color: #000; text-decoration: none; transition:all .3s}
 .link_drop a {background: #373f52; padding-left: calc(5% + 5px); color: #f4f4f4;}
 .link_drop a:hover {box-shadow: 4px 0 0 0 #aab2bd inset; color: #fff; text-decoration: none; transition:all .3s}
 .link_drop {height: 31px; overflow: hidden;}
 .link_drop:hover {height: calc(31px + 31px * 9);}
 .link_drop_top {background: #373f52 !important; padding: 0 5% !important;}
 .link_drop:before {width: 30px; height: 30px; content: ''; background: url('/icons/47372693.png') no-repeat center / 100%; transform: translate(-5px,0) rotate(-90deg); display: inline-block; float: right;}
 .link_drop:hover:before {transform: translate(-5px,0) ;}
 .link_drop, .menu a, .link_drop:before {transition: all linear .3s; -moz-transition: all linear .3s; -webkit-transition: all linear .3s; -o-transition: all linear .3s;} 

Answer 1

Чтобы было всегда развернуто, в стилях удалите строку 135:

 .link_drop {height: 31px; overflow: hidden;} 

А чтобы при клике свертывалось, для этого нужна доработка меню, за этим стоит образаться к фрилансерам на https://upartner.pro/ или https://divly.ru/