ben olayı daha pratik şekilde çözdüm

ana menü üzerinde açılabilir li etiketine padding bottom değeri verdim. böylece arada ne ladar boşluk istersem o kadar padding değeri verip aradaki boşlukta da menü açılır kalıyor.
Selamlar, top: veya margin-top: gibi özellikler kullanırsanız .acilirmenu'nun hover durumunu seçtiğiniz için mouse üzerinden kalktığında açılır menü de kapanacaktır doğal olarak. Bunu css ile padding kullanmadan yapamazsınız diye düşünüyorum. Zaten bu sorundan bahsetmişsiniz
Gelelim çözüme

Burada :hover durumunda açılacak olan etiketi ul yerine onu kapsayan bir div etiketine verdim. Bu div etiketine yalnızca yukarıdan alacağı boşluğu verdim. Dolayısıyla mouse artık hiçbir zaman menü üzerinden çıkmayacak. İçindeki ul etiketine de still kodlarını rahatlıkla verebilirim artık.
/* reset */
body {
padding:30px;
position:Relative;
}
/* reset */
.mainMenu {
display:flex;
margin:0;
padding:0;
list-style:none;
}
.mainMenu li {
display:block;
background:#333;
color:#fff;
position:relative;
padding:10px;
}
.mainMenu li .mainMenuDropdown {
display:none;
position:absolute;
width:200px;
left:0;
padding-top:50px; /* bu değeri değiştirerek aradaki mesafeyi artırabilirsiniz */
}
.mainMenu li .mainMenuDropdown .alt_menu {
background:#333;
margin:0;
padding:0;
list-style:none;
}
.mainMenu li .mainMenuDropdown .alt_menu li {
display:block;
padding:10px;
margin:0;
}
.mainMenu li .mainMenuDropdown .alt_menu li:hover {
background:#444;
}
.mainMenu li:hover .mainMenuDropdown {
display:block;
}<ul class="mainMenu">
<li class="acilirmenu">Ürünler
<div class="mainMenuDropdown">
<ul class="alt_menu">
<li class="altmenu">Alt Menü 1</li>
<li class="altmenu">Alt Menü 2</li>
<li class="altmenu">Alt Menü 3</li>
<li class="altmenu">Alt Menü 4</li>
</ul>
</div>
</li>
</ul>