CSS中的嵌套下拉关闭延迟

Question

我有一个我设计的 CSS 引导下拉菜单，我正在尝试添加一些延迟（和流畅的演示）以在下拉菜单打开后关闭。

我该怎么做？

演示（工作）：

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
  display: block;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: red;
  margin-top: 5px;
  margin-right: -10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<div class="dropdown">
      <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="#">
                 Settings <span class="caret"></span>
            </a>
      <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Remove</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
          <a tabindex="-1" href="#">Admin</a>
          <ul class="dropdown-menu">
            <li><a tabindex="0" href="#">Setting1</a></li>
            <li><a tabindex="0" href="#">Setting2</a></li>
            <li><a tabindex="0" href="#">Setting3</a></li>
          </ul>
        </li>
      </ul>
    </div>
</div>

我玩过transition-delay:3s;，但这并没有解决我的问题:(

任何帮助将不胜感激。

Answer 1

我认为对 CSS 进行一些小改动就可以解决问题。最大的问题是display: block 会使不透明度无法转换/动画。使用visibility 可以实现这种转换。

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
  -webkit-border-radius: 0 6px 6px 6px;
  -moz-border-radius: 0 6px 6px;
  border-radius: 0 6px 6px 6px;
  visibility: none;
  opacity: 0;
  transition: all 200ms ease-in-out;
  display: block;
}

.dropdown-submenu:hover>.dropdown-menu {
  visibility: visible;
  opacity: 1;
}

.dropdown-submenu>a:after {
  display: block;
  content: " ";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: red;
  margin-top: 5px;
  margin-right: -10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
  <div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="#">
                 Settings <span class="caret"></span>
            </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
      <li><a href="#">Remove</a></li>
      <li class="divider"></li>
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">Admin</a>
        <ul class="dropdown-menu">
          <li><a tabindex="0" href="#">Setting1</a></li>
          <li><a tabindex="0" href="#">Setting2</a></li>
          <li><a tabindex="0" href="#">Setting3</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>