Question

我正在尝试创建一个悬停菜单，但希望将悬停菜单打开一段时间，例如2秒。我正在尝试添加CSS过渡，因为它无法正常工作。我使用以下样式CSS：

.drop_menu {
    background:#10BDF5;
    padding:0;
    margin:0;
    list-style-type:none;
    height:25px;
}
.drop_menu li { float:left; }
.drop_menu li a {
    padding:3px 6px;
    display:block;
    color:#FFF;
    text-decoration:none;

    font-size: 11px;
    line-height: 22px;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#51C7ED;}
.drop_menu li:hover ul {
    left:0px;
    top:28px;
    background:#51C7ED;
    padding:0px;
    border-bottom: 5px solid #1292BB;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;

    /* LOOK AT THESE CSS TRANSITION PROPERTIES */
    -webkit-transition: visibility 2s ease-in;
    -moz-transition: visibility 2s ease-in;
}

.drop_menu li:hover ul li a {
    padding:1px 4px;
    display:block;
    width:200px;
    font-size: 11px;
    text-indent:11px;
    background-color:#10BDF5;
}
.drop_menu li:hover ul li a:hover { background:#51C7ED; }

请在此行下方查看该属性：/* LOOK AT THESE CSS TRANSITION PROPERTIES */我使用的是正确的语法或属性吗？

Answer 1

这有助于我link使用opacity代替display: none;

.drop_menu li:hover ul {
  visibility: visible;
  opacity: 1;
  transition: opacity 2s linear;
}
.drop_menu li ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}

希望这会对你有所帮助。

从评论中编辑HTML CSS：

Html Editor1：http://codepen.io/anon/pen/ByLVym

Html Editor2：http://codepen.io/anon/pen/ogzygb

如何将CSS转换应用于悬停菜单

1 个答案: