当我尝试将鼠标移到主下拉菜单的下拉子菜单上时，主下拉菜单消失并显示下一个下拉(如果有下拉项)菜单项。也许 CSS 代码有问题。我尝试按照其他人的建议使用 display: inline-block; 但它仍然无法正常工作。
CSS 代码:
.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代码:
<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>
有任何修复吗？谢谢。
最佳答案
我删除了所有其他 css，功能正常。
你正在寻找类似的东西:
.gva-navigation>ul>li>ul {
display: none;
}
.gva-navigation>ul>li:hover>ul {
display: inline;
}
关于html - 尝试将鼠标移到上方时子菜单消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50491444/