Sub menu Disappears when try to move mouse over - html

Question

When I try to move the mouse over the drop-down submenu form the main drop down menu the main drop down menu disappears and the next drop-down (if there is drop down items) menu item is shown. Maybe there is something wrong with the CSS code. I tried using display: inline-block; as others have suggested but it is still not working.
CSS code:
.gva-navigation > ul > li {
position: relative;
z-index: 100;
}
.gva-navigation > ul > li > ul {
position: absolute;
padding: 0 1000em; /* trick from css-tricks comments */
margin: 0 -1000em; /* trick from css-tricks comments */
}
.gva-navigation > ul > li:hover > ul {
position: absolute;
display: none;
left: 0;
}
.gva-navigation > ul > li > ul > li {
position: absolute;
display: inline-block;
left: 0;
}
.gva-navigation > ul > li > ul > li > ul {
position: absolute;
}
Html Code:
<div class="gva-navigation">
<ul class="clearfix gva_menu gva_menu_main">
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Departments <span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
</li>
<li class="menu-item">
<a target="" href="en/Economics.html">
ECONOMICS/ISLAMIC ECONOMICS</a>
</li>
<li class="menu-item">
<a target="" href="en/Finance.html">
FINANCE/ISLAMIC FINANCE</a>
</li>
<li class="menu-item">
<li class="menu-item menu-item--expanded">
<a target="" href="en/Training.html">
TRAINING </a>
</li>
<li class="menu-item mune-item--expanded">
<a target="" href="en/Information_Center.html">
INFORMATION CENTER </a>
</li>
<li class="menu-item mune-item--expanded">
<a target="" href="en/JOURNAL_OF_NEW_ECONOMICS.html">
JOURNAL OF NEW ECONOMICS </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="" href="#">
Teaching & Performance <span class="icaret nav-plus fa fa-angle-down"></span></a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/Teaching_Approaches.html">
Teaching Approaches</a>
</li>
<li class="menu-item">
<a target="" href="en/Midway_Approach.html">
Midway Approach</a>
<li class="menu-item">
<a target="" href="en/Graduates_Profile.html">
Graduates Profile</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Admissions <span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/students.html">
Admission Requirements <span class="icaret nav-plus fa fa-angle-down"></span></a>
<ul class="menu sub-menu">
<li class="menu-item">
<a target="" href="en/3_Tracks_for_BA_Holders.html">
3 Tracks for BA Holders</a>
</li>
<li class="menu-item">
<a target="" href="en/Language_Requirements.html">
Language Requirements</a>
</li>
<li class="menu-item">
<a target="" href="en/Grades.html">
Grades</a>
</li>
<li class="menu-item">
<a target="" href="en/Admission_Course_Requirements.html">
Admission Course requirements</a>
</li>
</ul>
</li>
<li class="menu-item">
<a target="" href="https://obs.asbu.edu.tr/oibs/ogrenci/login.aspx">
Applications and Deadlines </a>
</li>
<li class="menu-item">
<a target="" href="https://www.asbu.edu.tr/tr/akademik-takvim">
International Students </a>
</li>
<li class="menu-item">
<a target="" href="en/student-work-forms.html">
Apply </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Student <span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/students.html">
For Students </a>
</li>
<li class="menu-item">
<a target="" href="https://obs.asbu.edu.tr/oibs/ogrenci/login.aspx">
Student Information System </a>
</li>
<li class="menu-item">
<a target="" href="https://www.asbu.edu.tr/tr/akademik-takvim">
Academic Calendar </a>
</li>
<li class="menu-item">
<a target="" href="en/student-work-forms.html">
Student Work Forms </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">
Course Requirements<span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu" style="margin-top: -30px;">
<li class="menu-item">
<a target="" href="en/MA_and_PHD_in_Economics.html">
MA & PHD IN ECONOMICS/ISLAMIC ECONOMICS <br> (DOUBLE MAJOR)</a>
</li>
<li class="menu-item">
<a target="" href="en/MA_and_PHD_in_Finance.html">
MA & PHD IN FINANCE/ISLAMIC<br>FINANCE<br>(DOUBLE MAJOR)</a>
</li>
</ul>
</li>
<li class="menu-item menu-item--expanded">
<a target="_self" href="#">About <span class="icaret nav-plus fa fa-angle-down"></span></a>
<ul class="menu sub-menu" style="margin-top: -30px;
left: -100px;">
<li class="menu-item" style="display: inline-block">
<a target="_self" href="#">
Founding Stage<span class="icaret nav-plus fa fa-angle-down"></span> </a>
<ul class="menu sub-menu">
<li class="menu-item">
<a target="" href="en/background.html" style="white-space: nowrap;">
Background </a>
</li>
<li class="menu-item">
<a target="" href="en/objectives.html">
Objectives </a>
</li>
<li class="menu-item">
<a target="" href="en/name.html">
Name </a>
</li>
<li class="menu-item">
<a target="" href="en/approach.html">
Approach </a>
</li>
</ul>
</li>
<li class="menu-item">
<a target="_self" href="en/Faculty.html">
Faculty </a>
</li>
<li class="menu-item">
<a target="" href="https://asbu.edu.tr/tr/iletisim-bilgileri">
Contact Information </a>
</li>
<li class="menu-item">
<a target="" href="en/contact.html">
Contact Form </a>
</li>
<li class="menu-item">
<a target="" href="https://asbu.edu.tr/tr/ulasim">
Transportation </a>
</li>
<li class="menu-item">
<a target="" href="https://asbu.edu.tr/tr/contact/bilgi_edinme">
Getting Information </a>
</li>
<li class="menu-item">
<a target="_self" href="en/Stages_of_Implementation.html">
Stages of Implementation </a>
</li>
<li class="menu-item">
<a target="" href="en/Organisational_Chart.html">
Organisational Chart </a>
</li>
</ul>
</li>
<li class="menu-item menu-item--collapsed">
<a target="_self" href="en/Annotated_List_of_Courses.html">
Annotated List of Courses </a>
</li>
</ul>
</div>
Any Fixes? Thank you.

Answer 1

I removed all other css and the functionality works.
You are looking for something like:
.gva-navigation>ul>li>ul {
display: none;
}
.gva-navigation>ul>li:hover>ul {
display: inline;
}