Html 有没有一种方法可以绕过溢出：隐藏以便绝对定位的div可以出现在它的外部？

我有一个菜单，在每个

上都有一个类使其

溢出：隐藏这样我就可以在上面实现动画了。这是其中一个列表项，有一个子菜单。此子菜单为
位置：绝对。溢出正在生成它，因此在单击它时您无法看到它。如果我删除
溢出：隐藏动画中断。我不知道该怎么办。除非有办法绕过，否则我想让我的子菜单出现，我必须完全放弃动画

动画

/* Wayra */
.wayra {
    overflow: hidden;
    -webkit-transition: border-color 0.3s, color 0.3s;
    transition: border-color 0.3s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
/*.wayra.contact-item {
    overflow: visible;
}*/
.wayra::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    background: #281879;
    /*z-index: -1;*/
    -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
.wayra a {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.wayra a:hover {
    color: #fff;
}
.wayra:hover::before {
    opacity: 1;
    background-color: #281879;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

下拉列表

/* Wayra */
.wayra {
    overflow: hidden;
    -webkit-transition: border-color 0.3s, color 0.3s;
    transition: border-color 0.3s, color 0.3s;
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}
/*.wayra.contact-item {
    overflow: visible;
}*/
.wayra::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    background: #281879;
    /*z-index: -1;*/
    -webkit-transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    transform: rotate3d(0, 0, 1, -45deg) translate3d(0, -3em, 0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s, background-color 0.3s;
    transition: transform 0.3s, opacity 0.3s, background-color 0.3s;
}
.wayra a {
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}
.wayra a:hover {
    color: #fff;
}
.wayra:hover::before {
    opacity: 1;
    background-color: #281879;
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
    -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
    transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

这里有一个链接，指向一个。
我坚信这是不可能的。但必须有其他方法来做类似的事情。如果你想制作动画，你必须从头重写菜单。
我坚信这是不可能的。但必须有其他方法来做类似的事情。如果要制作动画，必须从头重写菜单。
是的，将鼠标悬停在元素上时可以覆盖它：

.wayra:hover {
    overflow: visible;
}

是的，将鼠标悬停在图元上时可以覆盖它：

.wayra:hover {
    overflow: visible;
}

如何将该效果添加到
a
而不是
li
？让我们翻译一下：


.wyara
应该溢出：可见
.wyara>a
应该溢出：隐藏
.wayra:：before
变成
.wayra>a:：before
.wayra:hover:：before
变为
.wyara:hover>a:：before.wayra.open>a:：before

只是试了一下时髦的，看起来不错。
如何将这种效果添加到
a
而不是
li
？让我们翻译一下：


.wyara
应该溢出：可见
.wyara>a
应该溢出：隐藏
.wayra:：before
变成
.wayra>a:：before
.wayra:hover:：before
变为
.wyara:hover>a:：before.wayra.open>a:：before

只是试了一下时髦的，看起来不错。
效果不错。谢谢关于如何让它覆盖它的
右边框
有什么想法吗？这很有效。谢谢关于如何让它覆盖它的
右边框
有什么想法吗？