css - Wordpress 子菜单在悬停时消失

Question

我正在尝试修复我的 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 {
}

Answer 1

您已经为子级 ul 添加了 margin-top。您需要删除顶部边距。改为添加填充。如下所示。

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