在我的导航菜单中,主菜单按钮上的转换功能正常。我正在使用手写笔。
这是代码笔。 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
关于CSS 过渡应用不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31834496/