refactor: do not close the menu, if you switch between menu and sub-menu (#23)

* configure hover-delay ...

... via e.g.: "data-dropdown-hover-delay=500"

* [+]: fix for "bounds === undefined"
[+]: do not close the menu, if you switch between menu and sub-menu

* [*]: sync the code-style

* [*]: sync the code-style v2

* [+]: keep css if "auto !important" is used

* Update bootstrap-dropdownhover.js

* Update bootstrap-dropdownhover.css

Author: voku

css/bootstrap-dropdownhover.css

@@ -1,35 +1,33 @@
-/*!
+/* --------------------------------------------------------- */
+/*
  * Dropdownhover v1.0.0 (http://bs-dropdownhover.kybarg.com)
  */
-.dropdown .dropdown-menu .caret {
-	border: 4px solid transparent;
-	border-left-color: #000;
-	float: right;
-	margin-top: 6px;
-} 
-.dropdown-menu {
-  min-width: 250px;
-}
-.dropdown-menu > li.open > a {
-	background-color: #F5F5F5;
-	color: #262626;
-	text-decoration: none;
-}
-.dropdown-menu .dropdown-menu {
-	left: 100%;
-	margin: 0;
-	right: auto;
-	top: -1px;
-}
-.dropdown-menu-right .dropdown-menu,
-.navbar-right .dropdown-menu .dropdown-menu,
-.pull-right .dropdown-menu .dropdown-menu {
-	left: auto;
-	right: 100%;
+/* --------------------------------------------------------- */
+
+/**
+ * add animation for bootstrap "dropdown-menu"
+ *
+ * @see:
+ * Animation duration: http://www.w3schools.com/cssref/css3_pr_animation-duration.asp
+ * Animation timing: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
+ */
+
+.dropdown > a {
+  -webkit-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
 }
+
 .dropdown-menu.animated {
   -webkit-animation-duration: 0.3s;
-          animation-duration: 0.3s;
+  -moz-animation-duration: 0.3s;
+  -o-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);;
+  -moz-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);;
+  -o-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);;
+  animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);;
 }
 .dropdown-menu.animated:before {
   content: " ";
@@ -41,33 +39,71 @@
   width: 100%;
   z-index: 99;
 }
-.dropdownhover-top {
-	margin-bottom: 2px;
-	margin-top: 0;
-}
-.navbar-fixed-bottom .dropdown-menu .dropdown-menu,
-.dropdownhover-top .dropdown-menu {
-	bottom: -1px;
-	top: auto;
-}
 
-.navbar-nav > li > .dropdown-menu {
-	margin-bottom: 0;
+.dropdown-menu.animated.fadeIn {
+  -webkit-animation-duration: 0.2s;
+  -moz-animation-duration: 0.2s;
+  -o-animation-duration: 0.2s;
+  animation-duration: 0.2s;
+  -webkit-animation-timing-function: ease-out;
+  -moz-animation-timing-function: ease-out;
+  -o-animation-timing-function: ease-out;
+  animation-timing-function: ease-out;
 }
 
 .dropdownhover-bottom {
-	-webkit-transform-origin: 50% 0;
-			transform-origin: 50% 0;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  /* <-- use the GPU for the rendering */
+  -webkit-transform-origin: 50% 0;
+  -moz-transform-origin: 50% 0;
+  -ms-transform-origin: 50% 0;
+  -o-transform-origin: 50% 0;
+  transform-origin: 50% 0;
 }
+
 .dropdownhover-left {
-	-webkit-transform-origin: 100% 50%;
-			transform-origin: 100% 50%;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  /* <-- use the GPU for the rendering */
+  -webkit-transform-origin: 100% 50%;
+  -moz-transform-origin: 100% 50%;
+  -ms-transform-origin: 100% 50%;
+  -o-transform-origin: 100% 50%;
+  transform-origin: 100% 50%;
 }
+
 .dropdownhover-right {
-	-webkit-transform-origin: 0 50%;
-			transform-origin: 0 50%;
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  /* <-- use the GPU for the rendering */
+  -webkit-transform-origin: 0 50%;
+  -moz-transform-origin: 0 50%;
+  -ms-transform-origin: 0 50%;
+  -o-transform-origin: 0 50%;
+  transform-origin: 0 50%;
 }
+
 .dropdownhover-top {
-	-webkit-transform-origin: 50% 100%;
-			transform-origin: 50% 100%;
-}
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  /* <-- use the GPU for the rendering */
+  -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -o-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+}
+