https://jsfiddle.net/#

HTML

<section class="main-blog">
    <div class="container">
    	  	<div class="li_menu">
  		<nav>
        <ul>
          <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>
               <li><a href="">Web-Разработка</a></li>
                 <div class="line-border"></div>
                 <li><a href="#">Кейсы</a></li>
              </ul>
              </li>
              <li><a href="#">Услуги</a></li>
              <li><a href="#">О нас</a></li>
          </ul>
      </nav>
  </div>
  <div>
    <h2>absolute</h2>
    <p>Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
 </p></div>

CSS

.li_menu {
        position: relative;
      }

      .main-blog__list {
        width: 100%;
      }

/* задаем цвет фона для контейнера nav. */
      nav {
         /*  margin: 50px 0; */
          background-color: #fff;
          width: 100%;
          position: relative;
          z-index:10;
      }
      
      /* убираем отступы и поля, а также list-style для "ul", 
       * и добавляем "position:relative" */
      nav ul {
          padding: 0;
          margin:0;
          list-style: none;
          position: relative;
          z-index:10;
          }
      
      /* применяем inline-block позиционирование к элементам навигации */
      nav ul li {
          margin: 0px -7px 0 0;
          display:inline-block;
          background-color: #fff;
          width: 25%;
          position: relative;
          cursor: pointer;
          z-index:10;
          }
      
      /* стилизуем ссылки */
      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 {
          display: none;
         /*  position: absolute;
          top: 60px;
          left:0;
          z-index: 101; */
          
          }
      
      /* отображаем выпадающий список при наведении */
        nav ul li:hover > ul {
          display: flex;
          flex-direction: column;
          z-index: 101;
          position: absolute;
          top: 60px;
          left:0; 
      }
      
      /* первый уровень выпадающего списка */
      nav ul ul li {
          width: 100%;
          display:list-item;
      }