AngularJS top menu submenu dropdowns on hover (persist showing whilst moving to submenu)

I have a top menu with various links. On hover, each should show a dropdown with additional menu items. I have tried attached onmouseover and onmouseleave events to the menu item to hide/show the sub menu; however, when transitioning off of the menu item and into the sub menu, the onmouseleave fires and hides the sub menu and the user doesn't have a chance to actually interact with the sub menu.

<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. How can I show the sub menu on hover, and hide it on leaving... whilst still allowing the user to actually access the sub menu so it doesn't hide before they can interact with it.

You were on the right track.

Make sure there is no space between your menu item and your absolute sub-menu. To ensure that there is no space, make the menu item bigger (using height or line-height), or add a padding to it...

Here's a working example:

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;
}

EDIT: if you want your submenu to float lightly lower, here's a way of doing that:

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

Just add the following CSS:

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

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