创建 2 级导航栏答案

【问题标题】：Creating a 2-level navigation bar创建 2 级导航栏
【发布时间】：2018-01-20 17:27:03
【问题描述】：

我想在悬停时创建具有延迟效果的 2 级导航。

在 css 中把transition放在哪里？

这里是sn-p代码：

@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>

【问题讨论】：

请添加一些您想要的图片并包含您已有的代码
好的，我的道歉是在stackoverflow上的第一篇文章。
好的，那你想延迟什么？
我希望该列表延迟发布。这样的动画效果
codepen.io/simplySam/pen/brrRMJ 是这样的吗？

标签： html css navbar navigationbar

【解决方案1】：

将z-index:1;background: #222122; 放在nav ul a{} 上以提升链接并隐藏下面的隐藏菜单
在nav li ul{} 中删除display: none; 并用bottom:0; 对齐底部并将其隐藏在带有z-index:-1; 的a 元素下
最后在nav li:hover ul{} 中使用bottom:-300%; 将其向下移动并在此处添加动画，使用transition: bottom .2s; 获得幻灯片效果，并且缓入使它看起来像是碰到了底部的东西

注意：底部：-300% 是因为有 3 个项目。

注意：转场位于:hover标签下，当你离开光标时它会消失，将它移动到nav li ul使其向上滑动

如果这确实是你想要的，你可以在这个 sn-p 中测试。

@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>

【讨论】：