RTL submenu not aligning properly

Question

I am using bootstrap 4.4.1 for my template and i am trying to create a Nav RTL since this is Arabic website menu should show as RTL,

In my Code 5th items from right has submenu but submenu is not aligning to left of the parent menu as you can see in example as well as screenshot, If i add right :0; to .submenu then it moves menu to extreme right

also menu doesnt stay on hover it just disappears when i try to move to child items

Not sure where i am doing thing wrong..

Menu should show up as in below image

https://codepen.io/KGuide/pen/gOpdLPR

.menu{direction:rtl;}
.header-menu{background:#EEE6D3; min-height:30px; text-align:center;  font-size:18px;}
.header-menu ul {
	margin: 0;
	list-style: none;
	position: relative;
}

.header-menu ul li {
	display: inline-block;
	font-size: 18px;
	font-weight: 600;
}

.header-menu > ul > li > a {
	padding: 15px 30px;
}

.header-menu ul ul li > a {
	font-size: 16px;
	font-weight: 600;
}

.header-menu a {
	display: block;
	padding: 0 10px;
	font-size: 18px;
	font-weight: 700;
	position: relative;
	line-height: 1;
	text-decoration: none;
	color: #555;
	padding: 10px 20px;
	text-transform: uppercase;
}

.header-menu a:hover {
background-color: #A9852D;
color:#fff;
}

.header-menu ul ul {
display: none;
position: absolute;
top: 50px;
background:#EEE6D3;
}

.header-menu ul li:hover > ul {
display: inherit;

}

.header-menu ul ul li {
	min-width: 150px;
	float: none;
	display: list-item;
	position: relative;
}

.header-menu ul ul ul li {
position: relative;
top: -50px;
right: 230px;
}

.header-menu ul ul li {
border-bottom: 1px solid #f5f5f5;
}

<div class="container-fluid menu"> 
  <div class="row ">
    <div class="col-12">
		<nav class='header-menu'>
			<ul class="menu-ul">
			  <li><a href="#home">الصفحة الرئيسية</a></li>
			  <li><a href="#about">من نحن</a></li>
			  <li><a href="#poetry">الشعر</a></li>
			  <li><a href="#award">الجوائز</a></li>
			  <li><a href="#media">قسم الإعلام</a>
					<ul class="submenu">
						<li><a href="#news">NEWS</a></li>
						<li><a href="#videos">VIDEOS</a></li>
					</ul>
			  </li>
			  <li><a href="#contact">اتصل بنا</a></li>
			</ul>
		</nav>
    </div>
 </div>	
</div>

Answer 1

Alignment

The problem has to do with understanding how position: relative and position: absolute work.

When an absolute-positioned element is placed within an element that has relative positioning - it uses the relative-positioned element to determine its boundaries, which can be utilized for your benefit.

In your case, you can solve your issue by doing this -

.header-menu ul li {
    display: inline-block;
    font-size: 18px;
    font-weight: 600;
    position: relative; /* new property */
}

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 50px;
    right: 0; /* new property */
    padding: 0; /* new property to avoid user agent stylesheet polluting */
    background: #EEE6D3;
}

Now, because .header-menu ul ul is positioned absolutely under .header-menu ul li that has relative positioning - it must "abide" to its parent rules and boundaries, and stick to the right of its parent. I hope that's clear.

Loss of focus on children (irrelevant as OP has solved this already, but leaving for future reference)

As far as your 2nd problem is concerned (not being able to hover over submenu items) - you could solve it by -

1. having no background on .header-menu ul ul
2. moving that background to .header-menu ul ul li
3. giving .header-menu ul ul a slight padding from the top
4. reducing .header-menu ul ul's top property by approx. 2 pixels.`

.header-menu ul ul {
    display: none;
    position: absolute;
    top: 48px;
    right: 0;
    padding: 2px 0 0 0;
}

.header-menu ul ul li {
    min-width: 150px;
    float: none;
    display: list-item;
    position: relative;
    background: #EEE6D3;
}

Rationale: You're losing focus because you no longer hover over the element in question. What we're trying to do by the code I just wrote, is have top padding on the submenu and reducing its distance from the top (thus making the mouse never leave the element itself).

When you hover over the submenu - you're still in the confines of the parent's hierarchy, which makes the menu item not disappear.

Codepen: https://codepen.io/ardethian/pen/MWwqbQM