Как сделать нормально выпадющее меню? т.к когда выпадает меню, она у меня находится за текстом не могу понять причину, может кто подсказать?
Вот мой код
<header>
<div class="container-fluid p-0 m-0"> <!-- открываем контейнер -->
<div class="top-nav">
<div class="row justify-content-center align-items-center p-0 m-0">
<div class="col-md-auto p-0 m-0">
<div class="logo">
<a href="#">
<img src="img/logo.svg" height="100" width="200" alt="Чемпионатное движение">
</a>
</div>
</div>
<div class="col-md-4">
<div class="site-title">
<a href="#">Официальный сайт</a>
</div>
</div>
</div>
</div>
<div class="row row justify-content-md-center p-0 m-0">
<div class="col-md-12 p-0 m-0">
<button class="top-nav_btn">
<i class="icon-menu"></i>
</button>
<nav>
<ul>
<li><a href="#">О движении</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">докуменды</a>
<ul>
<li><a href="#">Общие документы</a></li>
<li><a href="#">Регламентирующие документы</a></li>
<li><a href="#">Методические рекомендации</a></li>
</ul>
</li>
<li><a href="#">Региональные чемпионаты</a>
<ul>
<li><a href="#">I Региональный чемпионат 2023</a></li>
</ul>
</li>
<li><a href="#">Галереи</a>
<ul class="submenu">
<li><a href="#">Фотогалерея</a></li>
<li><a href="#">Видеогалерея</a></li>
</ul>
</li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<main class="content">
<div class="content-main">
<div class="background-first">
<div class="container-fluid">
<div class="row justify-content-md-center">
<div class="col-md-10">
<div class="headings">
<h1>О движении</h1>
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center p-0 m-0">
<div class="col-md-8">
<div class="content-text">
<p>
Гай Ю́лий Це́зарь (аутентичное произношение близко к Ка́йсар[4]; лат. Gaius Iulius Caesar [ˈgaːjʊs ˈjuːliʊs ˈkae̯sar]; 12 июля 100 года до н. э.[5] — 15 марта 44 года до н. э.) — древнеримский государственный и политический деятель, полководец, писатель. Консул 59, 48, 46, 45 и 44 годов до н. э., диктатор 49, 48—47 и 46—44 годов до н. э., великий понтифик с 63 года до н. э.
Происходивший из древней патрицианской семьи, Цезарь последовательно добивался всех ординарных римских должностей (cursus honorum) и сделал себе имя на борьбе с консервативными сенаторами (оптиматами). В 60 году до н. э. организовал первый триумвират с двумя влиятельными политиками — Гнеем Помпеем Великим и Марком Лицинием Крассом. С 58 года до н. э. более восьми лет провёл на территории современных Швейцарии, Франции, Бельгии, Германии и Великобритании в Галльской войне, присоединив к Римской республике огромную территорию от Атлантического океана до Рейна и снискав славу талантливого полководца. В начале 49 года до н. э. начал гражданскую войну из-за непримиримых разногласий с сенаторами по вопросам о деталях своего возвращения в Рим и о гарантиях судебной неприкосновенности за должностные преступления (подкупы на выборах, взятки должностным лицам, нарушение договоров, насильственные действия и другие нарушения). За четыре года сторонники сената, сгруппировавшиеся вокруг Помпея, были разбиты Цезарем в Италии, Испании (дважды), Греции и Африке, также им были разбиты войска правителей Египта и Понта.
Придерживался «политики милосердия», но в то же время казнил ряд своих ключевых оппонентов. Добившись полной победы над противниками, сконцентрировал в своих руках власть консула и чрезвычайные полномочия диктатора (в конце концов — в виде пожизненной должности), провёл ряд реформ во всех сферах жизни общества. При жизни Цезаря началось его обожествление, почётный титул полководца-победителя «император» стал частью его имени, однако он отказывался от власти древних римских царей. После убийства Цезаря группой сенаторов во главе с Марком Юнием Брутом внучатый племянник Цезаря Гай Октавий принял его имя и получил большую часть наследства по завещанию, став впоследствии первым императором.
К Цезарю по-разному относились при жизни, и эта традиция сохранилась в Римской империи: его имя всячески обелялось сторонниками правителей, а оппозиционеры восхваляли его жертв и заговорщиков. Очень популярной была личность Цезаря в Средние века и Новое время. Помимо политической и военной деятельности, Цезарь известен и как литератор. Из-за простоты и ясности стиля, его сочинения считаются классикой древнеримской литературы и используются при обучении латинскому языку. К имени Юлия Цезаря восходят титулы кайзер и царь, название седьмого месяца года во многих языках мира — июль. </p>
</div>
</div>
</div>
</div>
</div>
</main>
body{
background-color: var(--body-bg);
color: var(--text-color);
font-family: 'roboto', sans-serif;
padding: 0;
margin: 0;
}
a{
text-decoration: none;
background-color: transparent;
}
.logo img {
max-width: 100%;
max-height: 100%;
margin-top: 10px;
}
.site-title a{
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
color: #4fcc09;
font-size: 20px;
}
.post-head{
padding-top: 200px;
padding-bottom: 120px;
padding-left: 20px;
padding-right: 20px;
row-gap: 20px;
column-gap: 20px;
overflow: visible;
height: 700px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
background-position: 100% 100%;
background-position: bottom 50px;
background-repeat: no-repeat;
background-attachment: fixed;
}
.row{
padding: 0;
margin: 0;
}
.container-fluid{
padding: 0;
margin: 0;
}
.container{
padding: 0;
margin: 0;
}
.headings h1 {
position: relative;
z-index: 1;
display: inline-block;
letter-spacing: 1px;
margin: 0;
font-weight: 600;
font-size: 2,25rem;
line-height: 61px;
color: var(--text-color);
}
.headings:before {
content: '';
background: var(--active-block);
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
height: 2px;
}
header {
background: white;
position: block;
top: 0;
left: 0;
right: 0;
display: flex;
text-align: center;
padding: 0 8%;
}
header a {
text-decoration: none;
outline: none;
display: block;
transition: .3s ease-in-out;
}
.footer{
padding: 30px 0;
}
ul li {
position: relative;
float: left;
}
ul li a {
color: black;
font-size: 18px;
display: block;
padding: 20px
}
ul li a:hover{
background: black;
color: white;
}
nav ul li ul {
position: absolute;
left: 0;
width: 200px;
background: #fff;
display: none;
}
nav ul li ul li {
width: 100%;
}
nav ul li ul li ul{
left: 200px;
top: 0;
}
nav ul li:hover > ul {
display: block;
}
.background-first{
box-shadow: 0 0 #00000070;
padding-top: 70px;
padding-bottom: 50px;
padding-left: 10px;
padding-right: 10px;
margin-top: !important;
margin-bottom: !important;
row-gap: 20px;
column-gap: 20px;
overflow: visible;
background-color: #BDECB6;
}
.content-text p{
font-weight: 400;
margin: 0 0 20px;
font-size: 18px;
}
.footer{
border-bottom: 5px solid #4fcc09;
}
