Выпадающие меню подменю AngularJS при наведении курсора (сохраняются при переходе в подменю)

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

EDIT: если вы хотите, чтобы ваше подменю плавать слегка ниже, вот способ сделать это:

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

Просто добавьте следующий CSS:

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

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