drop down menu is hardly staying open - html

Question

This is a frequently addressed problem in SO, but almost 5 of the threads here didn't offer any help. The dropdown menu items are not staying open unless I hover over the initial item many times. I can't locate the problem in a specific class, any help would be appreciated.
Here is the CSS Code:
nav ul {
list-style: none;
}
nav ul li {
display: block;
float: right;
}
nav ul ul {
display: none;
position: relative;
margin-top: 60px;
}
nav ul li:hover > ul {
display: block;
position: absolute;
margin-left: -30px;
}
nav ul ul li {
width: 170px;
float: none;
display: block;
}
#navigation_bar a {
display: block;
float: right;
padding: 5px;
font-size: 25px;
color: black;
}
#navigation_bar a:hover {
border-radius: 20px;
color: #FFFFFF;
transition: color 0.2s;
}
div nav {
display: block;
}
And here is the corresponding HTML code:
<div id="navigation_bar">
<nav>
<ul>
<li>شركتنا</li>
<li>الخدمات</li>
<li>المركز الإعلامي
<ul>
<li>آخر الأخبار</li>
<li>معرض الصور</li>
</ul>
</li>
<li>التحميلات</li>
<li>اتصل بنا</li>
</ul>
</nav>
</div>

Answer 1

It's because there's a bit of a gap between the parent nav and the child dropdown. When you try to hover on the child dropdown and your cursor passes over this gap, you lose the li:hover state hence the dropdown hides.
nav ul ul {
...
margin-top: 43px;
...
}
https://jsfiddle.net/mq29ac39/1/
Now compare this one with the original margin-top: 63px
https://jsfiddle.net/mq29ac39/2/
I added background a color to give a better visual idea about the gap