@Xva1er

Как сделать выпадающее меню?

Как сделать нормально выпадющее меню? т.к когда выпадает меню, она у меня находится за текстом не могу понять причину, может кто подсказать?

641e18958ad63075541032.png

Вот мой код
<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;
}
  • Вопрос задан
  • 120 просмотров
Решения вопроса 1
@Vefolio
Свойство z-index в CSS определяет порядок расположения элементов в пространстве, то есть на каком уровне будет отображаться элемент по отношению к другим элементам на странице.

Пример:
Есть два элемента div на странице, первый с классом "A" и второй с классом "B". У элемента A задано свойство z-index: 1, а у элемента B - z-index: 2. Это означает, что элемент B будет отображаться поверх элемента A, даже если он расположен ниже в HTML-коде.

CSS-код для примера:
.A {
  z-index: 1;
}

.B {
  z-index: 2;
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@klekovkinandrey
хедеру z-index задайте
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы