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

Question

[Максим Комаров]

Делаю на сайте меню, в котором есть подменю, проблема в том, что изначально вёрстка меню была в горизонтальном положении, сейчас решил сделать в вертикальном. И вот проблема с подменю, когда навожу, оно вылезает, но не сдвигает следующий пункт в меню (примеры на фото)
ВОПРОС: Как сделать, чтобы при выпадении меню, сдвигался нижний пункт меню?





Само же выпадение меню делал в самой вёрстке:

HTML:

<nav class="nav">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a class="nav__link" href="#">Главная</a>
                        </li>
                        <li class="nav__item">
                            <a class="nav__link has-subnav" href="#">Статьи</a>

                            <ul class="subnav">
                                <li>
                                    <a class="subnav__link" href="#">- Создание сайтов</a>
                                </li>                       
                                <li>
                                    <a class="subnav__link" href="#">- Интернет маркетинг</a>
                                </li>                       
                                <li>
                                    <a class="subnav__link" href="#">- Продвижение видео</a>
                                </li>
                            </ul>

                        </li>
                        <li class="nav__item">
                            <a class="nav__link" href="#">Обо мне</a>
                        </li>
                        <li class="nav__item">
                            <a class="nav__link" href="#">Вход</a>
                        </li>
                        <form class="search" action="/" method="POST">
                            <input class="search__input" type="text" placeholder="Поиск по сайту">
                        </form>
                    </ul>
                </nav>

SCSS:

.subnav {
	display: none;
	width: 100%;
	padding: .5rem 0;

	background-color: darken($basic, 6%);
	border-radius: 0 0 5px 5px;
	box-shadow: 0 6px 8px rgba($black, .2);

	position: absolute;
	top: 100%;
	left: 0;
}

.subnav__link {
	display: block;
	padding: 0.45rem 1.2rem;
	font-size: 2rem;
	color: $white;
	text-decoration: none;
	transition: all .2s ease-in-out;

	&:hover {
		background-color: darken($basic, 8%);
	}
}

Comments

[Сергей delphinpro]

absolute убрать

[Максим Комаров]

Сергей delphinpro, И вправду, сразу не додумался, благодарю за помощь!

[inFureal]

Сергей delphinpro, оформи в ответ, а автор отметит, чтобы не засорять "эфир"

Answer 1

[Сергей delphinpro]

absolute убрать