Implement Bootstrap-based sub-menus

app/assets/javascripts/bootstrap-dropdown-submenu.js

@@ -0,0 +1,17 @@
+$(document).ready(function () {
+  $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    $(this).parent().addClass('open');
+
+    var menu = $(this).parent().find("ul");
+    var menupos = menu.offset();
+
+    if ((menupos.left + menu.width()) + 30 > $(window).width()) {
+      var newpos = -menu.width();
+    } else {
+      var newpos = $(this).parent().width();
+    }
+    menu.css({left: newpos});
+  });
+});

app/assets/stylesheets/bootstrap-dropdown-submenu.css.scss

@@ -0,0 +1,38 @@
+.dropdown-submenu {
+  position: relative;
+}
+
+.dropdown-submenu > .dropdown-menu {
+  top: 0;
+  left: 100%;
+}
+
+.dropdown-submenu > a:after {
+  display: block;
+  content: " ";
+  float: right;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #cccccc;
+  margin-top: 5px;
+  margin-right: -10px;
+}
+
+.dropdown-submenu:hover > a:after {
+  border-left-color: #ffffff;
+}
+
+.dropdown-submenu.pull-left {
+  float: none;
+}
+
+.dropdown-submenu.pull-left > .dropdown-menu {
+  left: -100%;
+  margin-left: 10px;
+  -webkit-border-radius: 6px 0 6px 6px;
+  -moz-border-radius: 6px 0 6px 6px;
+  border-radius: 6px 0 6px 6px;
+}