僅CSS下拉菜單 - CSS3轉換

我創建了一個下拉菜單。很簡單，在桌面上運行良好。我也需要使用相同的標記進行響應。想象一下，當用戶點擊一個菜單圖標時，菜單就會出現，然後只需將所有列表項目堆疊在一起。僅CSS下拉菜單 - CSS3轉換

當用戶將鼠標懸停在「菜單項1」上時，出現「子菜單」。目前我只是讓它在懸停時出現並消失。它看起來不太好。我想知道是否有一個簡單的方法來使用CSS3轉換，使其下降很好。

感謝

CSS

.sub-menu{ 
display:none; 
} 

li.sub-menu-parent:hover .sub-menu { 
display: block; 
}

HTML

<nav> 
    <ul> 
    <li class="sub-menu-parent"><a href="#">Menu Item 1</a> 
     <ul class="sub-menu"> 
     <li><a href="#">Sub Item 1</a></li> 
     <li><a href="#">Sub Item 2</a></li> 
     <li><a href="#">Sub Item 3</a></li> 
     <li><a href="#">Sub Item 4</a></li> 
     </ul> 
    </li></ul> 
    <li><a href="#">Menu Item 2</a></li> 
    <li><a href="#">Menu Item 3</a></li> 
    <li><a href="#">Menu Item 4</a></li> 
    <li><a href="#">Menu Item 5</a></li> 
    </ul> 
</nav>

來源

2013-11-20 BhikhaM

查找到CSS過渡。另外，手機上沒有「懸停」狀態，除非您使用三星Galaxy Note或其他允許懸停的設備。 –

我確定手機上的水龍頭相當於在計算機上懸停。 – BhikhaM

手機上的選項卡*可能會將鼠標懸停，但不取決於此。這是笨拙的，並且當你點擊一個鏈接時不起作用（就像在你的代碼示例中一樣）。 – ayke

您將需要使用隱藏它的一種方式，不使用display: none，如果你想要做一個平穩過渡。瀏覽器不能從none轉換爲block，因此這是一個即時切換。

隱藏.sub-menu的一種方法是在懸停狀態下使用visibility: hidden;，然後使用visibility: visible;，但是這會使轉換變得更加困難。如果你只是transition: all 0.5 ease，那麼菜單將順利地淡入淡出，但當它丟失：懸停時，它將迅速消失。

有一個full article貫穿這樣做，但要點是添加transition-delay到可見性，然後刪除懸停狀態上的transition-delay。

.sub-menu-parent { position: relative; } 

.sub-menu { 
    visibility: hidden; /* hides sub-menu */ 
    opacity: 0; 
    position: absolute; 
    top: 100%; 
    left: -10%; 
    transition: all 0.5s ease 0s, visibility 0s linear 0.5s; /* the last value is the transition-delay for visibility */ 
} 

.sub-menu-parent:hover .sub-menu { 
    visibility: visible; /* shows sub-menu */ 
    opacity: 1; 
    left: 0; 
    transition-delay: 0s; /* this removes the transition delay so the menu will be visible while the other styles transition */ 
}

DEMO：http://codepen.io/shshaw/pen/gsFch

來源

2013-11-20 14:58:36 shshaw