悬停时的 CSS 过渡下拉菜单 - 向左绝对定位(_s wordpress 主题)

Question

我有一个下拉菜单，我想使用 css 进行转换。

下拉菜单使用绝对定位 left:-999em 和 left:100% 在悬停时显示，我希望它在悬停时轻轻地进出。

我尝试了以下其他事情

.main-navigation ul ul li:hover > ul {
    left: 100%;
    transition: left 0.5s ease;
}

我一直在离开这个问题并回到它，现在我真的认输了，我正在寻求帮助。我显然在做一些愚蠢的事情。

jsfiddle这个例子的

我正在使用来自 Wordpress 和 SASS 的 _s 主题。

.main-navigation {
    clear: both;
    display: block;
    float: left;
    width: 100%;

    ul {
        list-style: none;
        margin: 0;
        padding-left: 0;

        ul {
            box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
            float: left;
            position: absolute;
            top: 1.5em;
            left: -999em;
            z-index: 99999;

            ul {
                left: -999em;
                top: 0;
            }

            li {
                &:hover > ul {
                    left: 100%;
                }
            }

            a {
                width: 200px;
                }

                :hover > a {
                }

            a:hover {
            }
        }

        li:hover > ul {
            left: auto;
        }
    }
    li {
        float: left;
        position: relative;

        &:hover > a {
        }
    }
    a {
        display: block;
        text-decoration: none;
    }

    .current_page_item a,
    .current-menu-item a {
    }
}

Answer 1

您的 SASS 非常复杂并且嵌套了很多，所以看起来您好像错过了某个地方。

使用 CSS(通过 SASSMeister 转换为 SASS)可以看到悬停效果没有应用于第一级 li。

此外，999em 是一个很多，您可能需要考虑减少它或加快转换速度。

使用可用类减少 CSS。

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.sub-menu { 
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 1.5em;
  left: -999em;
  z-index: 99999;
  transition: left .25s ease;   
}

.main-navigation ul li:hover > .sub-menu {
  left:0;
}

.main-navigation ul ul a {
  width: 200px;
  padding: 1em;
}

.main-navigation li {
  float: left;
  position: relative;
}
.main-navigation a {
  display: block;
  text-decoration: none;
  margin-right: 1em;
}

JSfiddle Demo