html - 如何将 CSS 过渡应用于悬停菜单

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; }

请查看此行下方的属性:/* 查看这些 CSS 转换属性 */ 我使用的语法或属性是否正确？

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 编辑器 1:http://codepen.io/anon/pen/ByLVym

HTML 编辑器 2:http://codepen.io/anon/pen/ogzygb