diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index 040637f..721fdcb 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -25,6 +25,21 @@
       const cl = e.classList;
       if (classes) {
         cl.add.apply(cl,classes);
+        classes.forEach(i => {
+          switch (i) {
+          case "open-menu-below" : {
+            this._omBelow = true;
+            break;
+          }
+          case "open-menu-outside" : {
+            this._omOutside = true;
+            break;
+          }
+          case "open-menu-left" : {
+            this._omLeft = true;
+          }
+          }
+        })
       };
       cl.add('button-group');
       this._el = e;
@@ -119,6 +134,13 @@
      */
     addList : function (title, data, itemClass = defaultItemClass) {
       const list = treeMenuClass.create([], itemClass);
+
+      list.openAt(
+        this._omLeft ? true : false,
+        this._omBelow ? true : false,
+        this._omOutside ? true : false,
+      );
+      
       this.add(title, data, function (e) {
         list.show();
         list.button(this.button);
diff --git a/dev/js/src/buttongroup/menu.js b/dev/js/src/buttongroup/menu.js
index 4a4abfc..8edc7ef 100644
--- a/dev/js/src/buttongroup/menu.js
+++ b/dev/js/src/buttongroup/menu.js
@@ -32,9 +32,22 @@
       // Add menu to body
       document.getElementsByTagName('body')[0].appendChild(e);
 
+      this._left = false;
+      this._below = false;
+      this._outside = false;
+
       return obj;
     },
 
+    /**
+     * Open the menu at a certain position
+     * relative to the button.
+     */
+    openAt : function (left, below, outside) {
+      this._left = left ? true : false;
+      this._below = below ? true : false;
+      this._outside = outside ? true : false;
+    },
 
     /**
      * The panel object of the menu,
@@ -108,12 +121,38 @@
 
     _repos : function (e) {
       const bounding = e.getBoundingClientRect();
-      this._el.style.left = bounding.left + "px";
-      this._el.style.top = (
-        bounding.top +
-          bounding.height -
-          this._el.clientHeight
-      ) + "px";
+      const s = this._el.style;
+
+      let left = window.pageXOffset;
+      let top = 0;
+
+      s.right = 'auto';
+      s.bottom = 'auto';
+
+      left += bounding.left;
+      
+      if (this._left) {
+        left += bounding.width - this._el.clientWidth
+      };
+
+      if (this._below) {
+        top += bounding.bottom;
+        
+        if (!this._outside) {
+          top -= bounding.height;
+        };
+
+      } else {
+        top -= this._el.clientHeight;
+        if (this._outside) {
+          top += bounding.top;
+        } else {
+          top += bounding.bottom;
+        };
+      };
+
+      s.left = left + "px";
+      s.top = top + "px";
     }
   };
 });