Question

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

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

Amoungst其他我尝试过以下的事情

.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

悬停时的CSS转换下拉菜单 - 左侧绝对定位（_s wordpress主题）

1 个答案: