Question

你们有没有人能够帮助我解决鼠标移出延迟问题？：d

我的导航栏有一个下拉菜单，但由于主菜单项和子菜单之间有几个像素的空白区域，如果我没有足够快地移动鼠标，则在鼠标输出时子菜单会再次消失。我一直在玩基于其他线程的答案的过渡效果，但我无法让它工作（因为我真的不了解逻辑 - 我通常通过反复试验来学习）。

因此，你们有人能帮助我吗？我更喜欢专注于过渡的解决方案（而不是减少白色空间的过程），因为我也想学习其他网页设计方面的过渡技巧。希望有了这些，我也更好地理解这些HTML结构是如何工作的，所以我可以重新使用基本概念来构思。

注意：菜单项在悬停时会改变颜色。列出了用于此目的的主要CSS，但我省略了特定的CSS颜色。

Me.btnName.Whatever

nav {
  display:flex;
  align-items:center;
  flex-direction:row;
  float:right;
  nav-right:auto;
  justify-content:space-between;
}

.btn.btn-primary {
  border: 0px;
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.btn.btn-primary:hover {

}

.dropdown-menu {
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.dropdown ul.dropdown-menu li a{
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.dropdown ul.dropdown-menu li a:hover{

}

.dropdown:hover .dropdown-menu {
  display: block;
}

Answer 1

我认为您的问题不在于转换，而在于导航栏本身。你顺便使用bootstrap吗？在下面的代码片段中，我只是将BS链接到您的代码，我看到的是菜单是可点击的，但点击子菜单真的很棘手。

btn btn-primary类更像是可点击的菜单或提交按钮，但你仍然可以看起来像一个带有一点CSS的按钮。但是对于下拉菜单，我猜它不是很直观。

＆＃13;

.btn.btn-primary {
  border: 0px;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

.dropdown-menu {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a href="./index" class="navbar-brand">Foundation</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
          <p class="navbar-btn">
                    <a href="#" class="btn btn-primary" data-toggle="dropdown">Our mission</a>
                </p>
          
            
          </li>
          <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li>
                <a href="./Guidelines#Conservation">Natural resources</a>
              </li>
              <li>
                <a href="./Guidelines#Food">Access to food</a>
              </li>
              <li>
                <a href="./Guidelines#Health">Public health</a>
              </li>
            </ul>
              </li>
        </ul>

      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
</body>

</html>

＆＃13;

鼠标移出后显示子菜单

1 个答案: