Выводим стрелку в подменю, указывающая на родителя, выводиться сверху, почему?

Question

[Антон Вебсайтовский]

Вывожу категории, в раскрывающемся ul, вывожу подменю, там я сделал стрелку вверху, которая указывает на категорию, так чисто для красоты, но стрелка у меня выходит на много выше, то ли я туплю ) но пока не пойму почему.

Щас вот так, стрелка на много выше блока с бграундом, а должна быть впритык стрелка.


Вот так я хочу сделать:


Пример тут:
https://codepen.io/AXOT/pen/emOZjVd

Код который отвечает за стрелку:

ul.sub1 {
	background: #f3f6f8;
	padding: 10px 20px 10px 20px;
	border-radius: 2px;
	margin: 5px 0 10px 0;
	position: relative;
}
ul.sub1::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 0; /* размещаем прямо над блоком */
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 10px solid #000;
}

Comments

[Ivan Ustûžanin]

отлаживать не пробовали? в devtools всё чётко видно:

Answer 1

[Сергей delphinpro]

Абсолютное позиционирование отсчитывается от ближайшего не-static элемента. e вас это - li родительского пункта.
сделайте ul с relative и встанет относительно него.

Comments

[Антон Вебсайтовский]

Класс sub1 , в ul и так стоит, у него position: relative;

[Сергей delphinpro]

Антон Вебсайтовский, это свойство переопределено другим классом. Смотрите в devtools

[Антон Вебсайтовский]

Сергей delphinpro, Увидел уже, ниже класс идет, который и перебивал.

.jqaccmenu ul ul.submenu li ul.submenu {
	width: 100%;
	display: none;
	position: static;
}