<section class="main-blog">
<div class="container">
<div class="li_menu">
<nav>
<ul>
<li><a href="https://site-wow.ru/blog/">Главная</a></li>
<li><a href="#">Рублики ⇣</a>
<ul>
<li><a href="https://site-wow.ru/category/marketing">Маркетинг</a></li>
<li><a href="https://site-wow.ru/category/service">Сервисы</a></li>
<li><a href="https://site-wow.ru/category/prodazhi">Продажи</a></li>
<li><a href="https://site-wow.ru/category/web-razrabotka">Web-Разработка</a></li>
<div class="line-border"></div>
<li><a href="https://site-wow.ru/category/cases">Кейсы</a></li>
</ul>
</li>
<li><a href="#">Услуги</a></li>
<li><a href="#">О нас</a></li>
</ul>
</nav>
</div>
Вот css
/* задаем цвет фона для контейнера nav. */
nav {
margin: 50px 0;
background-color: #fff;
width: 100%;
position: relative;
z-index:1000;
}
/* убираем отступы и поля, а также list-style для "ul",
* и добавляем "position:relative" */
nav ul {
padding:0 80px 0;
margin:0;
list-style: none;
position: relative;
z-index:1000;
}
/* применяем inline-block позиционирование к элементам навигации */
nav ul li {
margin: 0px -7px 0 0;
display:inline-block;
background-color: #fff;
padding-right: 80px;
position: relative;
cursor: pointer;
z-index:1000;
}
/* стилизуем ссылки */
nav a {
display:block;
padding:0 10px;
color:#a8a8a8;
font-size:20px;
line-height: 60px;
text-decoration:none;
position: relative;
}
/* изменяем цвет фона при наведении курсора */
nav a:hover {
text-decoration:none;
position: relative;
}
/* второй, третий и последующие уровни
* смещаем 2 и 3 уровни влево
* на значение длины первого уровня.
*/
nav ul ul ul {
position: absolute;
top:0;
left:100%;
}
/* скрываем выпадающие списки по умолчанию
* и задаем абсолютное позиционирование */
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
/* отображаем выпадающий список при наведении */
nav ul li:hover > ul {
display:inherit;
position: relative;
}
/* первый уровень выпадающего списка */
nav ul ul li {
min-width:170px;
float:none;
display:list-item;
position: relative;
z-index: 10000;
text-decoration:none;
}
.li_menu {
position: relative;
}
.main-blog__list {
width: 100%;
}
Как мне сделать что бы выпадающие меню ложилось поверх контента, сейчас если навести на выпадающие меню, то оно сдвигает контент вниз, а нужно что бы оно просто ложилось сверху.