Wordpress 子菜单在悬停时消失答案

【问题标题】：Wordpress Submenu Disappears On HoverWordpress 子菜单在悬停时消失
【发布时间】：2019-07-16 01:41:27
【问题描述】：

我正在尝试修复我的 wordpress website 上的子菜单。

下面是 CSS，我只是不确定要更改什么来使两者连接！我已经尝试过使用数字，但似乎没有任何效果。我已经把一切都恢复到“正常”，所以第二双眼睛会很棒。以下是我网站中使用的 CSS。

.navi-wrap ul {
    list-style: none;
    padding: 0;
}

.navi-wrap li {
    display: inline-block;
    position: relative;
}

.navi-wrap ul li {    
}

.navi-wrap li a {
    color: #555555;
    font-size: 10px;
    display: block;
    line-height: .5em;
    padding: 0 10px 0 15px;
    text-transform: uppercase;
    letter-spacing: .2em;
    text-decoration: none;
} 

    .navi-wrap li a:hover {
        color: #aaaaaa;
        line-height: 1.5em;
    }

    .navi-wrap li:last-child {
        color: #aaaaaa; 
        font-size: 0px;
        padding: 0;
    }   

.navi-wrap li:hover > a,
.navi-wrap ul ul :hover > a,
.navi-wrap .current-menu-item > a,
.navi-wrap .current-menu-ancestor > a,
.navi-wrap .current_page_item > a,
.navi-wrap .current_page_ancestor > a {
    background-repeat: no-repeat;
    background-position: 50% 0%;
}

    .navi-wrap li ul {
        position: absolute;
        left: -9999px;
        height: auto;
        width: 180px;
        text-align: left;
        z-index: 999;
        color: #404040;
        margin: 5px 0 0 0;
        display: block;
        *display: none;
        background-color: #e3e3e3;
    }       

                    .navi-wrap li li {
                        width: 180px;
                        z-index: 999;
                        float: left;
                        margin: 0px;
                        font-size: 10px;
                        text-align: left;
                        color: #555555;
                        display: block;
                        min-height: 12px;
                        background-color: #e3e3e3;
                    }

                        .navi-wrap ul li li:hover {
                            font-size: 10px;
                            background-color: #aaaaaa;
                            color: #555555 !important;
                        }

                .navi-wrap li li:last-child {
                    color: #25262b;
                    font-size:11px;
                }

                        .navi-wrap li li:after {
                            display: none;
                        }

                .navi-wrap li li {
                    padding: 0px;
                }

                .navi-wrap li li a {
                    font-size:10px;
                    color: #404040;
                    display: block;
                    padding: 18px 5px 15px 10px;
                    text-align: left;
                }

                    .navi-wrap li li a:hover {
                        background-color: #888888;
                        border: none;
                    }

                    .navi-wrap li li ul {
                        display: none;
                    }

    .navi-wrap li:hover ul, .navi-wrap li li:hover ul, .navi-wrap li li li:hover ul, .navi-wrap li.sfhover ul, .navi-wrap li li.sfhover ul, .navi-wrap li li li.sfhover ul {
        left: auto;
    }

.menu-item {
    margin: 0 -2px;
}

.navi-wrap:first-child {
}

【问题讨论】：

在.navi-wrap li ul 下，删除margin: 5px 0 0 0; 添加border-top: 5px solid white;
感谢您的帮助！！这适用于 Firefox，但不适用于 Chrome！知道为什么它会因浏览器而异！？
可能存在浏览器缓存，检查是否应用了新规则。
我想可能就是这样！如果你有一分钟，你会看看它是否对你有用吗？该网站是：www.alicialaceyphotography.com - 我根本不是技术人员，我只是通过谷歌搜索找到了这个网站！感谢您如此友善和乐于助人！
我没有看到任何新规则被应用，wordpress 缓存可能很难刷新，具体取决于服务器。

标签： css wordpress hover

【解决方案1】：

您已为儿童ul 添加了margin-top。您需要删除上边距。改为添加填充。如下所示。

ul.children {
    padding-top: 5px;
    margin-top: 0;
}

【讨论】：