创建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级导航栏

回答

相关问题