html - 尝试将鼠标移到上方时子菜单消失

Question

当我尝试将鼠标移到主下拉菜单的下拉子菜单上时，主下拉菜单消失并显示下一个下拉(如果有下拉项)菜单项。也许 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&nbsp;<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>

有任何修复吗？谢谢。

Answer 1

我删除了所有其他 css，功能正常。

你正在寻找类似的东西:

.gva-navigation>ul>li>ul {
    display: none;
}

.gva-navigation>ul>li:hover>ul {
    display: inline;
}