javascript - 悬停时 AngularJS 顶部菜单子(monad)菜单下拉菜单(移动到子菜单时持续显示)

Question

我有一个带有各种链接的顶级菜单。在悬停时，每个都应该显示一个带有附加菜单项的下拉菜单。我尝试将 onmouseover 和 onmouseleave 事件附加到菜单项以隐藏/显示子菜单；然而，当离开菜单项并进入子菜单时，onmouseleave 会触发并隐藏子菜单，用户没有机会与子菜单实际交互。

<nav>
    <div class="container-fluid">
        <ul class="">
            <li>
                <a ui-sref="home.person" ng-init="showPersonSubMenu=false" ng-mouseenter="showPersonSubMenu=true" ng-mouseleave="showPersonSubMenu=false">People</a>
                <ul class="person-sub-menu" ng-show="showPersonSubMenu">
                    <li>Add Person</li>
                </ul>
            </li>
            <li><a ui-sref="home.company">Companies</a></li>
            <li><a ui-sref="home.job">Jobs</a></li>
            <li><a ui-sref="home.report">Reports</a></li>
        </ul>
    </div>
</nav>

1. 我怎样才能在悬停时显示子菜单，并在离开时隐藏它...同时仍然允许用户实际访问子菜单，这样它就不会在他们可以与之交互之前隐藏。

Answer 1

你走在正确的轨道上。

确保菜单项和绝对子菜单之间没有空格。为确保没有空间，使菜单项更大(使用高度或行高)，或为其添加填充...

这是一个工作示例:

http://codepen.io/jlowcs/pen/QwJwJZ

HTML:

<ul class="menu">
  <li>
    <a>People</a>
    <ul class="sub-menu">
      <li>Add Person</li>
      <li>Action 2</li>
    </ul>
  </li>
  <li><a ui-sref="home.company">Companies</a></li>
</ul>

CSS:

ul, li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu {
  background: lightblue;
  height: 30px;
  padding: 0 10px;
}

.menu > li {
  display: inline-block;
  width: 100px;
  line-height: 30px;
}

.sub-menu {
  position: absolute;
  display: none;
  background-color: lightgreen;
  padding: 5px;
}

.sub-menu > li {
  display: block;
  cursor: pointer;
}

li:hover .sub-menu {
  display: block;
}

编辑:如果您希望您的子菜单稍微向下 float ，可以采用以下方法:

http://codepen.io/jlowcs/pen/dPQPxW

只需添加以下 CSS:

.sub-menu {
  margin-top: 10px;
}

.menu > li:hover {
  padding-bottom: 10px;
}