如何将 CSS 过渡应用于悬停菜单答案

【问题标题】：How to Apply CSS Transition to Hover Menu如何将 CSS 过渡应用于悬停菜单
【发布时间】：2014-12-27 16:18:42
【问题描述】：

我正在尝试创建悬停菜单，但想让悬停菜单打开一段时间，例如 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 */ 我是否使用了正确的语法或属性？

【问题讨论】：

我认为你必须将transition 的两条线都应用到.drop_menu li ul 并将它们从.drop_menu li:hover ul 中删除
请进一步解释并在此处添加 HTML（最佳情况：工作 JSFiddle 演示）。
@DominikSchmidt：像这样：codepen.io/jonbellah/pen/iwyFs?editors=110
@Banzay：试过但没有成功
这里有一个解决方案，但使用opacity 而不是visibility: codepen.io/anon/pen/OPRZKj

标签： html css css-transitions transitions

【解决方案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;
}

希望这会对你有所帮助。

从 cmets 编辑的 HTML CSS：

HTML 编辑器1：http://codepen.io/anon/pen/ByLVym

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

【讨论】：