Задать вопрос
deadloop
@deadloop
Активно осваиваю PHP
html

Выпадающее меню западает под DIV, как исправить?

Есть меню при на видении, выпадающий блок заезжает под DIV с классом content. Как это исправить, я уже все перепробовал.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="logo">LOGO</div>
        <nav>
                <ul>
                    <li><a href="#">О Нас</a></li>
                    <li><a href="#">Услуги</a></li>
                    <li class="sub-menu"><a href="#">Вакансии</a>
                        <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Новости</a></li>
                    <li class="sub-menu"><a href="#">Соглашение</a>
                        <ul>
                            <li><a href="#">Link 4</a></li>
                            <li><a href="#">Link 5</a></li>
                            <li><a href="#">Link 6</a></li>
                        </ul>
                    </li>
                    <li class="navEnter"><a href="#"><span>Войти</span></a></li>
                    <li class="navReg"><a href="#"><span>Зарегестрироватся</span></a></li>
                </ul>
            </nav>
            <div class="menu-toggle"><i class="fa fa-bars"></i></div>
    </header>
    <div class="body2">
        <div class="content">
                <h1>This one is the sub-section or widget title</h1>
                <h2>Next one is the item title inside widgets</h2>
                <h3>This is a label or CTA text</h3>
                <p>This is the body text which is used for most of the design, like paragraphs, lists, etc.</p>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.menu-toggle').click(function(){
                $('nav').toggleClass('active')
            })
            $('ul li').click(function(){
                $(this).siblings().removeClass('active');
                $(this).toggleClass('active');
            })
        })
    </script>
</body>
</html>


CSS
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
}

.container {
  width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

header {
  top: 0;
  left: 0;
  padding: 0 100px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
header .logo {
  color: rgba(31, 32, 65, 0.5);
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  float: left;
  font-weight: bold;
}
header nav {
  float: right;
}
header nav ul {
  margin: 0;
  padding: 0;
  display: flex;
}
header nav ul li {
  list-style: none;
  position: relative;
  transition: 0.5s;
}
header nav ul li.sub-menu:before {
  content: "";
  font-family: fontAwesome;
  position: absolute;
  line-height: 50px;
  color: rgba(31, 32, 65, 0.5);
  right: 2px;
}
header nav ul li.active.sub-menu:before {
  content: "";
}
header nav ul li ul {
  position: absolute;
  left: 0;
  background: rgba(31, 32, 65, 0.05);
  display: none;
}
header nav ul li ul li {
  display: block;
  width: 200px;
  transition: 0.5s;
}
header nav ul li a {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  color: rgba(31, 32, 65, 0.5);
  text-decoration: none;
  display: block;
  transition: 0.5s;
}
header nav ul li a:hover, header nav ul li a.active {
  color: #fff;
  background: #BC9CFF;
}

.navEnter span {
  border: 2px solid #BC9CFF;
  border-radius: 22px;
  padding: 5px 18px;
  color: #BC9CFF;
  font-weight: bold;
}
.navEnter span:hover, .navEnter span.active {
  color: #fff;
  background: #BC9CFF;
}
.navEnter a:hover, .navEnter a.active {
  color: none;
  background: none;
}

.navReg span {
  border: 2px solid #BC9CFF;
  border-radius: 22px;
  padding: 5px 18px;
  color: #fff;
  background: #BC9CFF;
  font-weight: bold;
}
.navReg span:hover, .navReg span.active {
  color: #BC9CFF;
  background: #fff;
}
.navReg a:hover, .navReg a.active {
  color: none;
  background: none;
}

header nav ul li.active ul {
  display: block;
  transition: 0.5s;
}

.menu-toggle {
  color: rgba(31, 32, 65, 0.5);
  float: right;
  line-height: 50px;
  font-size: 24px;
  cursor: pointer;
  display: none;
}

@media (max-width: 991px) {
  .container {
    width: 100%;
    position: relative;
    margin-right: auto;
    margin-left: auto;
  }

  header {
    padding: 0 20px;
  }
  header nav {
    position: absolute;
    width: 100%;
    height: calc( 100vh - 50px );
    top: 50px;
    left: -100%;
    transition: 0.5s;
  }
  header nav.active {
    left: 0;
  }
  header nav ul {
    display: block;
    text-align: center;
  }
  header nav ul a {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  }
  header nav ul li.sub-menu:before {
    right: 10px;
  }

  .menu-toggle {
    display: block;
  }

  header nav ul li.active ul {
    position: relative;
    background: rgba(31, 32, 65, 0.05);
  }

  header nav ul li ul li {
    width: 100%;
  }
}


Тут можно попробовать codepen.io
  • Вопрос задан
  • 300 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
vkinder
@vkinder
нужен background не прозрачный

header nav ul li ul {
background: #f7f7f7;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
kanonir1886
@kanonir1886 
header nav ul li ul{
background: #f3f3f5;
}

https://i.imgur.com/7NrzGL3.png
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Разработать интерфейс (UX/UI) для финансового сервиса
05 нояб. 2024, в 02:29
100000 руб./за проект
Исправить критические ошибки архитектуры приложения на Flutter, чаты
05 нояб. 2024, в 01:36
250000 руб./за проект
Редактирование 2 рекламных видеороликов, нарезка для рекламы, озвучка
05 нояб. 2024, в 00:45
2000 руб./в час
Ещё заказы