Dropdown-menu:before inside ul

Question

I want to ask, I have created dropdown menu list, but when in responsive mode, the dropdown-menu:before is not showing. I have set margin-top , but the dropdown-menu: before arrow is inside ul list menu. It happens only on mobile resolution (<768px). It should be outside ul list menu right ?

Here's the css code

.dropdown-menu{
top: 45px !important;
right: -320px;
left: -437px !important;
width: 460px;
box-shadow: 0px 5px 7px -1px #c1c1c1;
padding-bottom: 0px;
padding: 0px !important;
}
.dropdown-menu:before{
  content: "";
  position: absolute;
  top: -20px;
  right: 12px;
  border:10px solid #343A40;
  border-color: transparent transparent #343A40 transparent;
}

Here's html code

<div class="dropdown">
  <ul class="dropdown-menu">
     <li></li><li></li><li></li>
  </ul>
 </div>

Do you know how to make dropdown-menu:before outside the ul list menu box ?

Thank you

Answer 1

At first glance the main issue that you don't specify position: relative on .dropdown-menu .
So your :before pseudo-selector is not positioned relative to .dropdown-menu , but to some nearest parent with relative positioning.

Always keep in mind that elements with position: absolute positioned relative to nearest parent with position: relative .

position: relative on it's own won't help, because you weirdly position your elements.
Check it out https://codepen.io/fromaline/pen/zYBKMjp