CSS 转换应用不正确?

CSS transition not applying correctly?

在我的导航菜单中,主菜单按钮的转换功能正常。我正在使用手写笔。

这是代码笔。 http://codepen.io/anon/pen/LVqydm

header nav ul li
    display inline-block
    position relative

    padding 13px
    font-weight normal

    transition: all 0.4s // Transform here

header nav > ul > li
    font-family "Arial"
    font-weight bold
    font-size 1em

header nav ul li:hover
    background-color lighten(_grey, 50%)

此代码会导致在悬停时发生过渡,但我也希望在悬停在 li 上时显示的子列表也能过渡到。我已将其设置为执行此操作,但我一定是操作不正确。

HTML结构非常典型

ul
    li
        a
        ul
            li
                a

以下代码用于子列表,但它没有转换。

header nav ul li ul
    padding 0
    position absolute
    top 40px
    min-width 200px
    display none
    opacity 0
    visibility hidden

    transition all 0.4s

header nav ul li:hover ul
    display block
    opacity 1
    visibility visible

当鼠标悬停在顶部 li 上时,如何让过渡也应用于子列表。

我不熟悉 Stylus,但我认为是 display none 导致了问题。删除它似乎已经修复了这个 forked pen

header nav ul li ul
    padding 0
    position absolute
    top 40px
    min-width 200px
    opacity 0
    visibility hidden

    transition all 0.4s