創建2級導航欄

-6

我想在懸停時創建具有延遲效果的2級導航。創建2級導航欄

in css放在哪裏transition？

這裏是代碼片段：

@import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext'); 
 
body { 
 
    background: #ADAEAE; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-family: 'Quicksand'; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    background: #222122; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: fixed; 
 
} 
 

 
nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
} 
 

 
nav ul a { 
 
    display: inline-block; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    padding: 0 10px; 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 

 
nav ul a:hover { 
 
    background-color: #404040; 
 
    transition: all 1s; 
 
} 
 

 
nav ul ul li { 
 
    display: block; 
 
} 
 

 
nav li ul { 
 
    display: none; 
 
    position: absolute; 
 
    background: #222122; 
 
} 
 

 
nav li:hover ul { 
 
    display: block; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Dokument bez tytułu</title> 
 
    <link rel="stylesheet" href="style.css" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">About</a> 
 

 
     <ul> 
 
      <li><a href="#">About2</a></li> 
 
      <li><a href="#">About3</a></li> 
 
      <li><a href="#">About4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Offer</a> 
 
     <ul> 
 
      <li><a href="#">Offer2</a></li> 
 
      <li><a href="#">Offer3</a></li> 
 
      <li><a href="#">Offer4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

來源

2017-08-12 Pan Cogito

請添加你想要的一些圖片，包括你的代碼已經有 –

OK，我appologise是計算器上的第一篇文章。 –

好吧，你想要什麼延遲？ –

把z-index:1;background: #222122;上nav ul a{}提高鏈接和隱藏在nav li ul{}下面
隱藏的菜單中刪除display: none;和調整底部由bottom:0;和h與z-index:-1;
終於在nav li:hover ul{} IDE中的一個元素下有下移與bottom:-300%;這裏添加動畫，你會得到一個幻燈片效果與transition: bottom .2s;和易用性在使它看起來像它擊中底部

注意：底部：-300％是因爲有3個項目。

注：轉型是:hover標籤下的地方，這樣，當你與你的光標離開它消失，它移動到nav li ul，使其滑回了

，你可以在這個片段中測試，如果這確實是你通緝。

@import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext'); 
 
body { 
 
    background: #ADAEAE; 
 
    box-sizing: border-box; 
 
    color: white; 
 
    font-family: 'Quicksand'; 
 
    margin: 0; 
 
} 
 

 
nav { 
 
    background: #222122; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: fixed; 
 
} 
 

 
nav ul { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 

 
nav ul li { 
 
    display: inline-block; 
 
} 
 

 
nav ul a { 
 
    display: inline-block; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    padding: 0 10px; 
 
    color: white; 
 
    text-decoration: none; 
 
    z-index:1; 
 
    background: #222122; 
 
} 
 

 
nav ul a:hover { 
 
    background-color: #404040; 
 
    transition: all 1s; 
 
} 
 

 
nav ul ul li { 
 
    display: block; 
 
} 
 

 
nav li ul { 
 
    bottom:0; 
 
    
 
    position: absolute; 
 
    background: #222122; 
 
    z-index:-1; 
 
} 
 

 
nav li:hover ul { 
 
    bottom: -300%; 
 
    display: block; 
 
    transition: bottom .2s ease-in; 
 
}

<nav> 
 
    <ul> 
 
     <li><a href="#">About</a> 
 

 
     <ul> 
 
      <li><a href="#">About2</a></li> 
 
      <li><a href="#">About3</a></li> 
 
      <li><a href="#">About4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Offer</a> 
 
     <ul> 
 
      <li><a href="#">Offer2</a></li> 
 
      <li><a href="#">Offer3</a></li> 
 
      <li><a href="#">Offer4</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
    </nav>

來源

2017-08-12 11:27:02

創建2級導航欄

回答

相關問題