Question

在我的导航菜单中，主菜单按钮上的转换功能正常。我正在使用Stylus。

这是codepen。 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结构是非常典型的

以下代码适用于子列表，但没有转换。

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上时，如何将转换应用于子列表。

Answer 1

我对手写笔并不熟悉，但我认为导致问题的是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

CSS转换没有正确应用？

1 个答案: