Question

我有一个仅用CSS构建的多级下拉菜单。当鼠标移开时，下拉菜单将等待一秒钟，然后关闭。但是，主导航下有多个下拉菜单，因此，当鼠标从一个菜单移至另一个菜单时，延迟导致旧的下拉菜单在新打开的菜单后面保持打开状态。

基本上，我需要的是在鼠标移开时延迟下拉菜单的关闭，但是如果鼠标移到另一个菜单上并立即关闭下拉菜单，则可以防止多个下拉菜单堆叠在另一个菜单上。也欢迎使用jQuery的解决方案。

我当前的代码在此jsfiddle和以下代码段中：

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  transition: 0s 0.5s;
  z-index: 9999;
  margin-top: -3px;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  visibility: visible;
  transition-delay: 0s;
  z-index: 9999;
}

.main-navigation li {
  float: left;
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #fff;
  text-decoration: none;
}

.navigation li {
  display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  background-color: #6FB7E9;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
  background-color: #3C8DC5;
}

.navigation ul {
  text-align: center;
  padding: 0px;
  margin-left: 0px;
  margin-bottom: 50px;
  margin-top: 20px;
}

.sub-menu li {
  width: 100%;
}

.sub-menu {
  background-color: #419bd0;
  border-top: 3px solid #2d6b90;
}

<nav class="main-navigation">
  <div class="menu-main-nav-container">
    <ul id="primary-menu" class="menu">
      <li><a href="#">Parent</a>
        <ul class="sub-menu">
          <li><a href="#">Link Parent</a>
            <ul class="sub-menu">
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
            </ul>
          </li>
          <li><a href="#">Other</a>
            <ul class="sub-menu">
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 1

如果我对您的理解是正确的：这是一个小技巧，但逻辑是仅将转换延迟设置为 “非悬停”状态，因此只有在鼠标移开时才会发生。

.main-navigation:not(:hover) ul ul {
  transition: 0s 0.5s;
}

工作示例

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation:not(:hover) ul ul {
  transition: 0s 0.5s;
}

.main-navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  z-index: 9999;
  margin-top: -3px;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li.focus>ul {
  visibility: visible;
  transition-delay: 0s;
  z-index: 9999;
}

.main-navigation li {
  float: left;
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  color: #fff;
  text-decoration: none;
}

.navigation li {
  display: inline;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
  background-color: #6FB7E9;
  border-radius: 3px;
  cursor: pointer;
  padding: 12px;
  padding: 0.75rem;
}

.navigation li a:hover,
.navigation li.active a {
  background-color: #3C8DC5;
}

.navigation ul {
  text-align: center;
  padding: 0px;
  margin-left: 0px;
  margin-bottom: 50px;
  margin-top: 20px;
}

.sub-menu li {
  width: 100%;
}

.sub-menu {
  background-color: #419bd0;
  border-top: 3px solid #2d6b90;
}

<nav class="main-navigation">
  <div class="menu-main-nav-container">
    <ul id="primary-menu" class="menu">
      <li><a href="#">Parent</a>
        <ul class="sub-menu">
          <li><a href="#">Link Parent</a>
            <ul class="sub-menu">
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
              <li><a href="/">Link A</a></li>
            </ul>
          </li>
          <li><a href="#">Other</a>
            <ul class="sub-menu">
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
              <li><a href="/">Link B</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Answer 2

从import time import tensorflow as tf dimension = 11 repeat = 2**10 use_gpu = False # Device: /device:GPU:0, Dimension 11, Repeat: 1024, Time cost: 0.00457597 seconds. # Device: /cpu:0, Dimension 11, Repeat: 1024, Time cost: 0.00353599 seconds. dev_name = '/device:GPU:0' if use_gpu else '/cpu:0' with tf.device(dev_name): i = tf.constant(0) while_condition = lambda i: tf.less(i, repeat) a = tf.constant(1.1, shape=[2**dimension, 2**dimension]) b = tf.constant(2.2, shape=[2**dimension, 2**dimension]) def body(i): res = tf.matmul(a, b) add = tf.add(i, 1) return (add,) ini_matmul = tf.matmul(a, b) # do the loop: loop = tf.while_loop(while_condition, body, [i]) with tf.Session(config=tf.ConfigProto(log_device_placement=True)) as sess: sess.run(ini_matmul) # force initialisation. t0 = time.time() sess.run(loop) t1 = time.time() print('Device: {dev}, Dimension {dim:d}, Repeat: {r:d}, Time cost: {t:.8f} seconds.'.format( dev = dev_name, dim = dimension, r = repeat, t = t1 - t0 )) sess.close()中删除transition，如下所示，将其添加到.main-navigation ul ul中：

.main-navigation ul li>ul

此处工作代码：

.main-navigation ul li>ul {
  transition: visibility 0.5s;
}

.main-navigation {
  clear: both;
  display: block;
  float: left;
  width: 100%;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  visibility: hidden;
  position: absolute;
  top: 105%;
  left: 0;
  z-index: 9999;
  margin-top: -3px;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li:focus>ul {
  left: 100%;
}

.main-navigation ul ul a {
  width: 250px;
}

.main-navigation ul li>ul {
  transition: visibility 0.5s;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li:focus>ul {
  visibility: visible;
  z-index: 9999;
}

.main-navigation li {
  float: left;
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

.sub-menu li {
  width: 100%;
}

.sub-menu {
  background-color: #419bd0;
  border-top: 3px solid #2d6b90;
}

JSFiddle：https://jsfiddle.net/zj9nLu38/40/

子菜单关闭延迟多个下拉菜单

2 个答案: