angular-bootstrap dropdown on hover try 3

<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
  <link
    rel="stylesheet"
    href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
  >
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div ng-controller="DropdownCtrl">
    <!-- angular-bootstrap dropdown -->
    <span class="dropdown" ng-class="{'open': status.isopen}">
      <a
        href
        class="dropdown-toggle"
        ng-mouseenter="status.isopen = true"
        ng-mouseleave="status.isopen = false"
      >
        hover for a dropdown with angular-bootstrap
      </a>
      <ul
        class="dropdown-menu"
        ng-mouseenter="status.isopen = true"
        ng-mouseleave="status.isopen = false"
      >
        <li ng-repeat="choice in items" ng-click="status.isopen = false">
          <a href>{{choice}}</a>
        </li>
      </ul>
    </span>
    <!-- css dropdown  -->
    <a class="css-dropdown">
      hover here with css.
      <div class="css-dropdown-menu">
        <p>item 1</p>
        <p>item 2</p>
        <p>item 3</p>
      </div>
    </a>
  </div>
  <script src="https://code.angularjs.org/1.3.5/angular.js"></script>
  <script
    src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"
  >
  </script>
  <script src="example.js"></script>
</body>
</html>

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function ($scope, $log) {
  $scope.items = [
    'The first choice!',
    'And another choice for you.',
    'but wait! A third!'
  ];

  $scope.status = {
    isopen: false
  };

  $scope.toggled = function(open) {
    $log.log('Dropdown is now: ', open);
  };

  $scope.toggleDropdown = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.status.isopen = !$scope.status.isopen;
  };
});

.dropdown-toggle {
  width: 300px;
  display: block;
}
.dropdown-menu {
  top: -5px;
}
.css-dropdown .css-dropdown-menu {
  margin-top: -5px;
  display: none;
}
.css-dropdown:hover .css-dropdown-menu {
  display: block;
}