如何將CSS轉換應用到懸停菜單

我正在嘗試創建一個懸停菜單，但希望將懸停菜單打開一段時間，例如2秒。我正在嘗試爲這個bu添加CSS轉換，但它不起作用。我使用下面的樣式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 */我使用正確的語法或財產？

來源

2014-12-27 Imran Omer

我認爲你必須兩者'transition'線適用於'.drop_menu李UL '並將它們從'.drop_menu li：hover ul'中移除。 – Banzay 2014-12-27 16:23:35

請進一步解釋並在此處添加HTML（最佳案例：使用JSFiddle Demo）。 – 2014-12-27 16:23:56

@DominikSchmidt：像這樣：http://codepen.io/jonbellah/pen/iwyFs?editors=110 – 2014-12-27 16:53:19

這幫助我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 Editor1：http://codepen.io/anon/pen/ByLVym

的Html Editor2：

HTML編輯從評論CSS http://codepen.io/anon/pen/ogzygb

來源

2014-12-27 17:10:33

如何將CSS轉換應用到懸停菜單

回答

相關問題