diff --git a/css/bootstrap-dropdownhover.css b/css/bootstrap-dropdownhover.css
index 0cb9adf..a6d21bf 100644
--- a/css/bootstrap-dropdownhover.css
+++ b/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%;
-}
\ No newline at end of file
+  -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%;
+}
+
diff --git a/js/bootstrap-dropdownhover.js b/js/bootstrap-dropdownhover.js
index 2738241..aba1c79 100644
--- a/js/bootstrap-dropdownhover.js
+++ b/js/bootstrap-dropdownhover.js
@@ -1,299 +1,455 @@
 /* ========================================================================
- * Bootstrap: dropdownhover.js v1.1.0
+ * Bootstrap: dropdownhover.js v1.1.x
  * http://kybarg.github.io/bootstrap-dropdown-hover/
  * ========================================================================
  * Licensed under MIT (https://github.com/kybarg/bootstrap-dropdown-hover/blob/master/LICENSE)
  * ======================================================================== */
 
++function($) {
+    'use strict';
 
-+function ($) {
-  'use strict';
+    // DROPDOWN CLASS DEFINITION
+    // =========================
 
-  // DROPDOWN CLASS DEFINITION
-  // =========================
+    var backdrop = '.dropdown-backdrop';
 
-  var backdrop = '.dropdown-backdrop'
+    var Dropdownhover = function(element, options) {
+        this.options  = options;
+        this.$element = $(element);
 
-  var Dropdownhover = function (element, options) {
-    this.options = options
-    this.$element = $(element)
+        var that = this;
 
-    var that = this
+        // defining if navigation tree or single dropdown
+        if (this.$element.hasClass('dropdown-toggle')) {
+            this.dropdowns = this.$element.parent().find('.dropdown-menu').parent('.dropdown');
+        } else {
+            this.dropdowns = this.$element.find('.dropdown');
+        }
 
-    // Defining if navigation tree or single dropdown
-    this.dropdowns = this.$element.hasClass('dropdown-toggle') ? this.$element.parent().find('.dropdown-menu').parent('.dropdown') : this.$element.find('.dropdown')
+        // this.dropdowns contains all "li" elements which have a submenu
 
-    if (!options.onClick) {
-      this.dropdowns.each(function () {
-        $(this).on('mouseenter.bs.dropdownhover', function (e) {
-          that.show($(this).children('a, button'))
-        })
-      })
+        // this.options contains a onClick property which contains that the actual browser fires touch events, but this isn't used
 
-      this.dropdowns.each(function () {
-        $(this).on('mouseleave.bs.dropdownhover', function (e) {
-          that.hide($(this).children('a, button'))
-        })
-      })
-    } else {
-      this.dropdowns.each(function () {
-        $(this).children('a, button').on('click.bs.dropdownhover', function (e) {
-          var isActive = $(this).parent().hasClass('open')
-          isActive ? that.hide($(this)) : that.show($(this))
-        })
-      })
-    }
+        this.dropdowns.each(function() {
 
-  }
+            $(this).children('a, button').on('touchstart', function(e) {
 
-  Dropdownhover.TRANSITION_DURATION = 300
-  Dropdownhover.DELAY = 150
-  Dropdownhover.TIMEOUT
+                // console.log('Dropdownhover - options.onClick - touchstart');
 
-  Dropdownhover.DEFAULTS = {
-    onClick: false,
-    animations: ['fadeInDown', 'fadeInRight', 'fadeInUp', 'fadeInLeft'],
-  }
+                $(this).attr('data-touchstart-event', 'true');
 
-  function getParent($this) {
-    var selector = $this.attr('data-target')
+            }).on('click', function(e) {
 
-    if (!selector) {
-      selector = $this.attr('href')
-      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
-    }
+                // console.log('Dropdownhover - options.onClick - click', e);
 
-    var $parent = selector && $(document).find(selector)
+                var touchstartEvent = $(this).attr('data-touchstart-event');
 
-    return $parent && $parent.length ? $parent : $this.parent()
-  }
+                if (touchstartEvent === 'true') {
 
-  function clearMenus(e) {
-    if (e && e.which === 3) return
-    $(backdrop).remove()
-    $('[data-hover="dropdown"]').each(function () {
-      var $this = $(this)
-      var $parent = getParent($this)
-      var relatedTarget = { relatedTarget: this }
+                    var isActive = $(this).parent().hasClass('open');
+                    var showMenu = $(this).attr('data-show-menu');
+                    if (!isActive && showMenu !== 'true') {
+                        that.show($(this));
+                        e.preventDefault();
 
-      if (!$parent.hasClass('open')) return
+                        // Hack: Stop immediate to disable all followed event handlers, to stop that bootstrap offcanvas
+                        // can interfer with the menu. This will also stop all further event handler.
+                        e.stopImmediatePropagation();
 
-      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return
+                    } else {
+                        var href = $(this).attr('href');
+                        if (!href) {
+                            that.hide($(this));
+                        }
+                    }
 
-      $parent.trigger(e = $.Event('hide.bs.dropdownhover', relatedTarget))
+                    // console.log('Dropdownhover - options.onClick - click - touched', e);
+                }
 
-      if (e.isDefaultPrevented()) return
+            });
 
-      $this.attr('aria-expanded', 'false')
-      $parent.removeClass('open').trigger($.Event('hidden.bs.dropdownhover', relatedTarget))
-    })
-  }
+            $(this).on('mouseenter.bs.dropdownhover', function(e) {
 
-  // Opens dropdown menu when mouse is over the trigger element
-  Dropdownhover.prototype.show = function (_dropdownLink) {
-    var $this = $(_dropdownLink)
+                // console.log('Dropdownhover - !options.onClick - mouseenter.bs.dropdownhover', e.target);
 
+                that.show($(this).children('a, button'))
 
-    window.clearTimeout(Dropdownhover.TIMEOUT)
-    // Close all dropdowns
-    $('.dropdown').not($this.parents()).each(function () {
-      $(this).removeClass('open')
-    });
+            }).on('mouseleave.bs.dropdownhover', function(e) {
 
-    var effect = this.options.animations[0]
+                // console.log('Dropdownhover - !options.onClick - mouseleave.bs.dropdownhover', e.target);
 
-    if ($this.is('.disabled, :disabled')) return
+                that.hide($(this).children('a, button'))
 
-    var $parent = $this.parent()
-    var isActive = $parent.hasClass('open')
+            })
+        })
+
+    };
 
-    if (!isActive) {
+    Dropdownhover.TRANSITION_DURATION = 300;
+    Dropdownhover.DELAY_SHOW          = 250;
+    Dropdownhover.DELAY_HIDE          = 800;
+    Dropdownhover.TIMEOUT_SHOW;
+    Dropdownhover.TIMEOUT_HIDE;
+
+    Dropdownhover.DEFAULTS = {
+        onClick:    false,
+        animations: [
+            'fadeInDown',
+            'fadeInRight',
+            'fadeInUp',
+            'fadeInLeft'
+        ]
+    };
 
-      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
-        // if mobile we use a backdrop because click events don't delegate
-        $(document.createElement('div'))
-          .addClass('dropdown-backdrop')
-          .insertAfter($(this))
-          .on('click', clearMenus)
-      }
+    /**
+     * @param $this
+     *
+     * @returns {*}
+     */
+    function getParent($this) {
+        var selector = $this.attr('data-target');
+
+        if (!selector) {
+            selector = $this.attr('href');
+            selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
+        }
 
-      var $dropdown = $this.next('.dropdown-menu')
+        var $parent = selector && $(document).find(selector);
 
-      $parent.addClass('open')
-      $this.attr('aria-expanded', true)
+        return $parent && $parent.length ? $parent : $this.parent()
+    }
 
-      // Ensures that all menus that are closed have proper aria tagging.
-      $parent.siblings().each(function () {
-        if (!$(this).hasClass('open')) {
-          $(this).find('[data-hover="dropdown"]').attr('aria-expanded', false);
+    /**
+     * @param e
+     */
+    function clearMenus(e) {
+        if (e && e.which === 3) {
+            return;
         }
-      })
-
-      var side = this.position($dropdown)
-
-      switch (side) {
-        case 'top':
-          effect = this.options.animations[2]
-          break;
-        case 'right':
-          effect = this.options.animations[3]
-          break;
-        case 'left':
-          effect = this.options.animations[1]
-          break;
-        default:
-          effect = this.options.animations[0]
-          break;
-      }
-
-      $dropdown.addClass('animated ' + effect)
-
-      var transition = $.support.transition && $dropdown.hasClass('animated')
-
-      transition ?
-        $dropdown
-          .one('bsTransitionEnd', function () {
-            $dropdown.removeClass('animated ' + effect)
-          })
-          .emulateTransitionEnd(Dropdownhover.TRANSITION_DURATION) :
-        $dropdown.removeClass('animated ' + effect)
+
+        $(backdrop).remove();
+        $('[data-hover="dropdown"]').each(function() {
+            var $this         = $(this);
+            var $parent       = getParent($this);
+            var relatedTarget = { relatedTarget: this };
+
+            if (!$parent.hasClass('open')) {
+                return;
+            }
+
+            if (
+                e
+                &&
+                e.type === 'click'
+                &&
+                /input|textarea/i.test(e.target.tagName)
+                &&
+                $.contains($parent[0], e.target)
+            ) {
+                return;
+            }
+
+            $parent.trigger(e = $.Event('hide.bs.dropdownhover', relatedTarget));
+
+            if (e.isDefaultPrevented()) {
+                return;
+            }
+
+            $this.attr('aria-expanded', 'false');
+            $parent.removeClass('open').trigger($.Event('hidden.bs.dropdownhover', relatedTarget))
+        })
     }
 
-    return false
-  }
+    /**
+     * Opens dropdown menu when mouse is over the trigger element.
+     *
+     * @param _dropdownLink
+     *
+     * @returns {boolean}
+     */
+    Dropdownhover.prototype.show = function(_dropdownLink) {
+
+        var that  = this;
+        var $this = $(_dropdownLink);
+
+        window.clearTimeout(Dropdownhover.TIMEOUT_HIDE);
+
+        Dropdownhover.TIMEOUT_SHOW = window.setTimeout(function() {
+
+            // close all dropdowns
+            $('.dropdown').not($this.parents()).each(function() {
+                $(this).removeClass('open')
+            });
+
+            var effect = that.options.animations[0];
+
+            if ($this.is('.disabled, :disabled')) {
+                return;
+            }
+
+            var $parent  = $this.parent();
+            var isActive = $parent.hasClass('open');
+
+            if (!isActive) {
+
+                if ('ontouchstart' in document.documentElement && $parent.closest('.navbar-nav').length > 0) {
+
+                    // if mobile we use a backdrop because click events don't delegate
+                    //
+                    // it will also be append to the dom multiple times, but if you click on the menu entry the site
+                    // will be reloaded or if you click outsite of the menu all dom elements will be removed
+                    $(document.createElement('div'))
+                        .addClass('dropdown-backdrop')
+                        .on('click', clearMenus)
+                        .appendTo('body');
+                }
+
+                var $dropdown = $this.next('.dropdown-menu');
+
+                $parent.addClass('open');
+                $this.attr('aria-expanded', true);
+
+                // Ensures that all menus that are closed have proper aria tagging.
+                $parent.siblings().each(function() {
+                    if (!$(that).hasClass('open')) {
+                        $(that).find('[data-hover="dropdown"]').attr('aria-expanded', false);
+                    }
+                });
+
+                var side = that.position($dropdown);
+
+                switch (side) {
+                    case 'top':
+                        effect = that.options.animations[2];
+                        break;
+                    case 'right':
+                        effect = that.options.animations[3];
+                        break;
+                    case 'left':
+                        effect = that.options.animations[1];
+                        break;
+                    default:
+                        effect = that.options.animations[0];
+                        break;
+                }
+
+                $dropdown.addClass('animated ' + effect);
+
+                var transition = $.support.transition && $dropdown.hasClass('animated');
+
+                transition ?
+                    $dropdown
+                        .one('bsTransitionEnd', function() {
+                            $dropdown.removeClass('animated ' + effect)
+                        })
+                        .emulateTransitionEnd(Dropdownhover.TRANSITION_DURATION) :
+                    $dropdown.removeClass('animated ' + effect)
+            }
+
+        }, Dropdownhover.DELAY_SHOW);
+
+        return false
+    };
 
-  // Closes dropdown menu when mouse is out of it
-  Dropdownhover.prototype.hide = function (_dropdownLink) {
+    /**
+     * Closes dropdown menu when mouse is out of it.
+     *
+     * @param _dropdownLink
+     */
+    Dropdownhover.prototype.hide = function(_dropdownLink) {
 
-    var that = this
-    var $this = $(_dropdownLink)
-    var $parent = $this.parent()
-    var $this_delay = $this.data('dropdown-hover-delay');
-    Dropdownhover.TIMEOUT = window.setTimeout(function () {
-      $parent.removeClass('open')
-      $this.attr('aria-expanded', false)
-    }, ($this_delay ? $this_delay : Dropdownhover.DELAY))
-  }
+        var $this   = $(_dropdownLink);
+        var $parent = $this.parent();
 
-  // Calculating position of dropdown menu
-  Dropdownhover.prototype.position = function (dropdown) {
+        window.clearTimeout(Dropdownhover.TIMEOUT_SHOW);
 
-    var win = $(window);
+        Dropdownhover.TIMEOUT_HIDE = window.setTimeout(function() {
 
-    // Reset css to prevent incorrect position
-    dropdown.css({ bottom: '', left: '', top: '', right: '' }).removeClass('dropdownhover-top')
+            $parent.removeClass('open');
+            $this.attr('aria-expanded', false)
 
-    var viewport = {
-      top: win.scrollTop(),
-      left: win.scrollLeft()
+        }, Dropdownhover.DELAY_HIDE);
     };
-    viewport.right = viewport.left + win.width();
-    viewport.bottom = viewport.top + win.height();
-
-    var bounds = dropdown.offset();
-    bounds.right = bounds.left + dropdown.outerWidth();
-    bounds.bottom = bounds.top + dropdown.outerHeight();
-    var position = dropdown.position();
-    position.right = bounds.left + dropdown.outerWidth();
-    position.bottom = bounds.top + dropdown.outerHeight();
-
-    var side = ''
-
-    var isSubnow = dropdown.parents('.dropdown-menu').length
-
-    if (isSubnow) {
-
-      if (position.left < 0) {
-        side = 'left'
-        dropdown.removeClass('dropdownhover-right').addClass('dropdownhover-left')
-      } else {
-        side = 'right'
-        dropdown.addClass('dropdownhover-right').removeClass('dropdownhover-left')
-      }
-
-      if (bounds.left < viewport.left) {
-        side = 'right'
-        dropdown.css({ left: '100%', right: 'auto' }).addClass('dropdownhover-right').removeClass('dropdownhover-left')
-      } else if (bounds.right > viewport.right) {
-        side = 'left'
-        dropdown.css({ left: 'auto', right: '100%' }).removeClass('dropdownhover-right').addClass('dropdownhover-left')
-      }
-
-      if (bounds.bottom > viewport.bottom) {
-        dropdown.css({ bottom: 'auto', top: -(bounds.bottom - viewport.bottom) })
-      } else if (bounds.top < viewport.top) {
-        dropdown.css({ bottom: -(viewport.top - bounds.top), top: 'auto' })
-      }
-
-    } else { // Defines special position styles for root dropdown menu
-
-      var parentLi = dropdown.parent('.dropdown')
-      var pBounds = parentLi.offset()
-      pBounds.right = pBounds.left + parentLi.outerWidth()
-      pBounds.bottom = pBounds.top + parentLi.outerHeight()
-
-      if (bounds.right > viewport.right) {
-        dropdown.css({ left: -(bounds.right - viewport.right), right: 'auto' })
-      }
-
-      if (bounds.bottom > viewport.bottom && (pBounds.top - viewport.top) > (viewport.bottom - pBounds.bottom) || dropdown.position().top < 0) {
-        side = 'top'
-        dropdown.css({ bottom: '100%', top: 'auto' }).addClass('dropdownhover-top').removeClass('dropdownhover-bottom')
-      } else {
-        side = 'bottom'
-        dropdown.addClass('dropdownhover-bottom')
-      }
-    }
 
-    return side;
-
-  }
+    /**
+     * Calculating position of dropdown menu.
+     *
+     * @param dropdown
+     *
+     * @returns {string}
+     */
+    Dropdownhover.prototype.position = function(dropdown) {
+
+        var win = $(window);
+
+        // reset css to prevent incorrect position
+        dropdown.css({
+            bottom: '',
+            left:   '',
+            top:    '',
+            right:  ''
+        }).removeClass('dropdownhover-top');
+
+        var viewport    = {
+            top:  win.scrollTop(),
+            left: win.scrollLeft()
+        };
+        viewport.right  = viewport.left + win.width();
+        viewport.bottom = viewport.top + win.height();
+
+        var bounds = dropdown.offset();
+        if (bounds === undefined) {
+            // fallback hack
+            side = 'right';
+            return side;
+        }
+        bounds.right    = bounds.left + dropdown.outerWidth();
+        bounds.bottom   = bounds.top + dropdown.outerHeight();
+        var position    = dropdown.position();
+        position.right  = bounds.left + dropdown.outerWidth();
+        position.bottom = bounds.top + dropdown.outerHeight();
+
+        var side = '';
+
+        var isSubnow = dropdown.parents('.dropdown-menu').length;
+
+        if (isSubnow) {
+
+            if (position.left < 0) {
+                side = 'left';
+                dropdown.removeClass('dropdownhover-right').addClass('dropdownhover-left')
+            } else {
+                side = 'right';
+                dropdown.addClass('dropdownhover-right').removeClass('dropdownhover-left')
+            }
+
+            if (bounds.left < viewport.left) {
+                side = 'right';
+                dropdown.css({
+                    left:  '100%',
+                    right: 'auto'
+                }).addClass('dropdownhover-right').removeClass('dropdownhover-left')
+            } else if (bounds.right > viewport.right) {
+                side = 'left';
+                dropdown.css({
+                    left:  'auto',
+                    right: '100%'
+                }).removeClass('dropdownhover-right').addClass('dropdownhover-left')
+            }
+
+            if (bounds.bottom > viewport.bottom) {
+                dropdown.css({
+                    bottom: 'auto',
+                    top:    -(bounds.bottom - viewport.bottom)
+                })
+            } else if (bounds.top < viewport.top) {
+                dropdown.css({
+                    bottom: -(viewport.top - bounds.top),
+                    top:    'auto'
+                })
+            }
+
+        } else { // defines special position styles for root dropdown menu
+
+            var parentLi   = dropdown.parent('.dropdown');
+            var pBounds    = parentLi.offset();
+            pBounds.right  = pBounds.left + parentLi.outerWidth();
+            pBounds.bottom = pBounds.top + parentLi.outerHeight();
+
+            if (bounds.right > viewport.right) {
+                var styleTmp = dropdown.attr('style');
+                // keep css if "auto !important" is used
+                if (
+                    styleTmp
+                    &&
+                    (
+                        styleTmp.indexOf('left: auto !important;') === -1
+                        &&
+                        styleTmp.indexOf('right: auto !important;') === -1
+                    )
+                ) {
+                    dropdown.css({
+                        left:  -(bounds.right - viewport.right),
+                        right: 'auto'
+                    });
+                }
+            }
+
+            if (
+                bounds.bottom > viewport.bottom
+                &&
+                (pBounds.top - viewport.top) > (viewport.bottom - pBounds.bottom)
+                ||
+                dropdown.position().top < 0
+            ) {
+                side = 'top';
+                dropdown.css({
+                    bottom: '100%',
+                    top:    'auto'
+                }).addClass('dropdownhover-top').removeClass('dropdownhover-bottom')
+            } else {
+                side = 'bottom';
+                dropdown.addClass('dropdownhover-bottom')
+            }
+        }
 
+        return side;
 
-  // DROPDOWNHOVER PLUGIN DEFINITION
-  // ==========================
+    };
 
-  function Plugin(option) {
-    return this.each(function () {
-      var $this = $(this)
-      var data = $this.data('bs.dropdownhover')
-      var settings = $this.data()
-      if ($this.data('animations') !== undefined && $this.data('animations') !== null)
-        settings.animations = $.isArray(settings.animations) ? settings.animations : settings.animations.split(' ')
 
-      var options = $.extend({}, Dropdownhover.DEFAULTS, settings, typeof option == 'object' && option)
+    // DROPDOWNHOVER PLUGIN DEFINITION
+    // ==========================
 
-      if (!data) $this.data('bs.dropdownhover', (data = new Dropdownhover(this, options)))
+    /**
+     * @param option
+     *
+     * @returns {*}
+     *
+     * @constructor
+     */
+    function Plugin(option) {
+        return this.each(function() {
+            var $this    = $(this);
+            var data     = $this.data('bs.dropdownhover');
+            var settings = $this.data();
 
-    })
-  }
+            if ($this.data('animations') !== undefined && $this.data('animations') !== null) {
+                settings.animations = $.isArray(settings.animations) ? settings.animations : settings.animations.split(' ');
+            }
 
-  var old = $.fn.dropdownhover
+            var options = $.extend({}, Dropdownhover.DEFAULTS, settings, typeof option == 'object' && option);
 
-  $.fn.dropdownhover = Plugin
-  $.fn.dropdownhover.Constructor = Dropdownhover
+            if (!data) {
+                $this.data('bs.dropdownhover', (data = new Dropdownhover(this, options)));
+            }
 
+        })
+    }
 
-  // DROPDOWNHOVER NO CONFLICT
-  // ====================
+    var old = $.fn.dropdownhover;
 
-  $.fn.dropdownhover.noConflict = function () {
-    $.fn.dropdownhover = old
-    return this
-  }
+    $.fn.dropdownhover             = Plugin;
+    $.fn.dropdownhover.Constructor = Dropdownhover;
 
+    // DROPDOWNHOVER NO CONFLICT
+    // ====================
+    $.fn.dropdownhover.noConflict = function() {
+        $.fn.dropdownhover = old;
+        return this
+    };
 
-  // APPLY TO STANDARD DROPDOWNHOVER ELEMENTS
-  // ===================================
-  $(document).ready(function () {
-    $('[data-hover="dropdown"]').each(function () {
-      var $target = $(this)
-      if ('ontouchstart' in document.documentElement) {
-        Plugin.call($target, $.extend({}, $target.data(), { onClick: true }))
-      } else {
-        Plugin.call($target, $target.data())
-      }
+    // APPLY TO STANDARD DROPDOWNHOVER ELEMENTS
+    // ===================================
+    $(document).ready(function() {
+        $('[data-hover="dropdown"]').each(function() {
+            var $target = $(this);
+            if ('ontouchstart' in document.documentElement) {
+                Plugin.call($target, $.extend({}, $target.data(), { onClick: true }))
+            } else {
+                Plugin.call($target, $target.data())
+            }
+        })
     })
-  })
 
 }(jQuery);