Question

我的网站上有一个基于HTML和CSS的三层主菜单，如下所示：

我的问题是，当导航到第三层（GROUP1 > MODULE2 > FUNCTION5）时，子菜单不会在离开菜单第三层底部时消失，而是在光标低于第三层文本时消失。

链接跨越整个列表项，第一层或第二层上没有问题。

任何帮助或建议都将不胜感激。

这是html和css代码，简化：

HTML：

<div id="PageWrapper">
    <div id="MainMenuWrapper">
        <div id="MainMenuContainer">
            <div id="MainMenu">
                <ul id="MenuModuleGroups">
                    <li id="ModuleGroup_2" class="menu-module-group ">
                        <a class="menu-module-group-link" href="#">GROUP1</a>
                        <ul class="sub-menu-container" id="GroupModules_2">
                            <li id="Module_7" class="menu-module ">
                                <a class="menu-module-link" href="#">MODULE1</a>
                                <ul class="sub-function-container" id="ModuleFunctions_7">
                                    <li id="Function_12" class="menu-module-function ">
                                        <a class="menu-function-link" href="#">FUNCTION0</a>
                                    </li>
                                    <li id="Function_16" class="menu-module-function ">
                                        <a class="menu-function-link" href="#">FUNCTION1</a>
                                    </li>
                                    <li id="Function_13" class="menu-module-function ">
                                        <a class="menu-function-link" href="#">FUNCTION2</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>

    </div>
    <div id="ContentWrapper">
        <div id="ContentHeader">
            <h1 id="PageTitle">Dashboard</h1>
        </div>
        <div id="Content"></div>
    </div>
</div>

CSS：

* {
    font-family: 'Open Sans', Arial, sans-serif;
    margin: 0px;
    padding: 0px;
    border: none;
}

body {
    background-color: #282828;
}

ul {
    list-style-type: none;
}

#PageWrapper {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#MainMenuWrapper {
    width: 100%;
    height: 55px;
    background-color: #000;
    color: #fff;
    position:relative;

}

#MainMenuContainer {
    width: 90%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;

}

#MainMenu {
    width: calc(100% - 300px);
    height: 100%;
    float: left;

}

#MainMenu #MenuModuleGroups li {
    float: left;
    font-size: 20px;
    cursor: pointer;
    margin-right:1px;

}

#MainMenu #MenuModuleGroups li a.menu-module-group-link {
    display:block;
    padding: 16px 20px 16px;
    text-decoration: none;
    color: #fff;
}

#MainMenu #MenuModuleGroups li:hover,
#MainMenu #MenuModuleGroups li.selected-module-group {
    background-color: #4CAF50;
}

#MainMenu #MenuModuleGroups li.menu-module-group:hover::after {
    content: '';
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #4CAF50;
    position: relative;
    left: calc(50% - 10px);
    top: -12px;
    transform: rotate(45deg);
}

#MainMenu #MenuModuleGroups li ul {
    display:none;
    background-color: #1b1b1b!important;
    position:absolute;
    left:0px;
    top:55px;
    width:90%;
    height: 45px;
    padding: 0% 5%;
}

#MainMenu #MenuModuleGroups li:hover ul.sub-menu-container {
    display:block;
}

#MainMenu #MenuModuleGroups li ul li a.menu-module-link {
    font-size: 18px;
}

#MainMenu #MenuModuleGroups li ul li a.menu-module-link {
    display:block;
    padding: 12px 15px 12px;
    text-decoration: none;
    color: #fff;
}

#MainMenu #MenuModuleGroups li ul li:first-child a.menu-module-link {
    padding-left: 0px;
}

#MainMenu #MenuModuleGroups li ul li:hover {
    background-color: #1b1b1b!important;
}

#MainMenu #MenuModuleGroups li ul li ul {
    display:none;
    background-color: #232323!important;
    position:absolute;
    left:0px;
    top:45px;
    width:90%;
    height: 35px;
    padding: 0% 5%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}

#MainMenu #MenuModuleGroups li ul li:hover ul.sub-function-container {
    display:block;
}

#MainMenu #MenuModuleGroups li ul li ul li a.menu-function-link {
    display:block;
    font-size: 17px;
    padding: 8px 15px 7px;
    text-decoration: none;
    color: #fff;
    background-color: #232323!important;
}

#MainMenu #MenuModuleGroups li ul li ul li:first-child a.menu-function-link{
    padding-left: 0px;
}

#MainMenu #MenuModuleGroups li ul li:hover a.menu-module-link, 
#MainMenu #MenuModuleGroups li ul li.selected-module a.menu-module-link,
#MainMenu #MenuModuleGroups li ul li ul li:hover a.menu-function-link,
#MainMenu #MenuModuleGroups li ul li ul li.selected-function a.menu-function-link {
    color: #4CAF50!important;
}

#ContentWrapper {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-flow: column;
    height: calc(100% - 160px);
    padding-bottom: 20px;
}

#ContentWrapper h1 {
    margin-top: 20px;
    margin-bottom: 10px;
    color: #fff;
    font-weight: normal;
}

#ContentWrapper p.description {
    color: #fff;
    border-left: 3px solid #4CAF50;
    padding: 5px 10px 5px;
    margin-bottom: 10px;
}

#ContentWrapper #ContentHeader {
    flex: 0 1 auto;
}

#ContentWrapper #Content {
    flex: 1 1 auto;
    position:relative;
}

Answer 1

使用此选择器

，链接本身有一个相当大的填充

#MainMenu #MenuModuleGroups li ul li ul li a.menu-function-link

当光标位于此填充区域时，菜单将关闭。我会删除填充并将其放在li元素上，而不是填充两个元素。

CSS导航菜单悬停问题

1 个答案: