Как расположить меню поверх контента?

<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%;
      }


Как мне сделать что бы выпадающие меню ложилось поверх контента, сейчас если навести на выпадающие меню, то оно сдвигает контент вниз, а нужно что бы оно просто ложилось сверху.
  • Вопрос задан
  • 3053 просмотра
Решения вопроса 1
DanielMcRon
@DanielMcRon
C# && Unity
Возможно измененить position текста и меню?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы