diff --git a/dev/demo/all.html b/dev/demo/all.html
index a18b287..a01fcc3 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -38,8 +38,7 @@
         <input id="show" name="show" type="hidden" />
         <input id="collection-name" name="collection-name" type="hidden">
         <input id="collection" name="collection" type="text" value="">
-	with <span class="select">
-	  <!-- Change this to js-menu -->
+	with <span class="menu select">
 	  <select name="ql" id="ql-field">
 	    <option value="poliqarp">Poliqarp</option>
 	    <option value="cosmas2">Cosmas II</option>
diff --git a/dev/demo/menu.html b/dev/demo/menu.html
index c76496d..db88cbf 100644
--- a/dev/demo/menu.html
+++ b/dev/demo/menu.html
@@ -23,6 +23,15 @@
 
     <div id="menu" class="vc" style="padding-top: 80px; padding-left: 80px;"></div>
 
+    <span id="choose-ql" class="menu select" style="position: absolute; right: 100px; top: 90px;">
+      <select name="ql">
+	<option value="poliqarp">Poliqarp</option>
+	<option value="cosmas2">Cosmas 2</option>
+	<option value="annis">Annis QL</option>
+	<option value="cql">CQL</option>
+      </select>
+    </span>
+
     <main>
       <div>
 	<div id="pagination"><a rel="prev"><span><i class="fa fa-caret-left"></i></span></a><a rel="self"><span>1</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&amp;ql=poliqarp&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
diff --git a/dev/demo/menudemo.js b/dev/demo/menudemo.js
index c00f01e..2180634 100644
--- a/dev/demo/menudemo.js
+++ b/dev/demo/menudemo.js
@@ -2,7 +2,7 @@
   baseUrl: '../js/src'
 });
 
-require(['menu','menu/item', 'menu/prefix', 'menu/lengthField'], function (menuClass, itemClass, prefixClass, lengthFieldClass) {
+require(['menu','menu/item', 'menu/prefix', 'menu/lengthField', 'selectMenu'], function (menuClass, itemClass, prefixClass, lengthFieldClass, selectMenuClass) {
 
   /**
    * Create own menu item class.
@@ -86,4 +86,6 @@
 
   menu.limit(3).show(3);
   menu.focus();
+
+  selectMenuClass.create(document.getElementById('choose-ql')).limit(5); // .show();
 });
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 61e783b..c003a1d 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -9,6 +9,7 @@
   'lib/alertify',
   'session',
   'tagger',
+  'selectMenu',
   'api',
   'mailToChiffre',
   'lib/highlight/highlight.pack',
@@ -22,7 +23,8 @@
 	     vcArray,
 	     alertifyClass,
 	     sessionClass,
-	     tagger) {
+	     tagger,
+	     selectMenuClass) {
 
   // Set hint array for hint helper
   KorAP.hintArray = hintArray;
@@ -73,6 +75,7 @@
       input.style.display = 'none';
       vcname = document.createElement('span');
       vcname.setAttribute('id', 'vc-choose');
+      vcname.classList.add('select');
 
       var currentVC = loc.VC_allCorpora;
       if (KorAP.koralQuery !== undefined && KorAP.koralQuery["collection"]) {
@@ -88,7 +91,6 @@
       input.parentNode.insertBefore(vcname, input);
     };
 
-
     /**
      * Add actions to match entries
      */
@@ -122,6 +124,11 @@
       });
     };
 
+    // Replace QL select menus with KorAP menus
+    selectMenuClass.create(
+      document.getElementById('ql-field').parentNode
+    ).limit(5);
+
     var result = document.getElementById('resultinfo');
     var resultButton = null;
     if (result != null) {
diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 69107d0..4d9df49 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -78,7 +78,6 @@
       // Create the element
       var el = document.createElement("ul");
       with (el) {
-	style.opacity = 0;
 	style.outline = 0;
 	setAttribute('tabindex', 0);
 	classList.add('menu', 'roll');
@@ -391,14 +390,13 @@
 	this._prefix.active(true);
 
 	// finally show the element
-	this._element.style.opacity = 1;
+	this._element.classList.add('visible');
 
 	return true;
       };
 
       var offset = 0;
 
-
       // Set a chosen value to active and move the viewport
       if (arguments.length === 1) {
 
@@ -443,10 +441,11 @@
       this._prefix.active(false);
 
       // finally show the element
-      this._element.style.opacity = 1;
+      this._element.classList.add('visible');
 
       // Add classes for rolling menus
       this._boundary(true);
+
       return true;
     },
 
@@ -456,9 +455,10 @@
      */
     hide : function () {
       this.removeItems();
-      this._element.style.opacity = 0;
       this._prefix.clear();
       this.onHide();
+      this._element.classList.remove('visible');
+
       /* this._element.blur(); */
     },
 
diff --git a/dev/js/src/selectMenu.js b/dev/js/src/selectMenu.js
index d51c31a..9ef6986 100644
--- a/dev/js/src/selectMenu.js
+++ b/dev/js/src/selectMenu.js
@@ -1,15 +1,15 @@
 define(
-  ['menu', 'menu/item', 'menu/prefix', 'menu/lengthField'],
-  function (menuClass, menuItemClass, prefixClass, lengthFieldClass) {
+  ['menu', 'selectMenu/item', 'menu/prefix', 'menu/lengthField'],
+  function (menuClass, selectMenuItemClass, prefixClass, lengthFieldClass) {
 
     return {
       create : function (element) {
-	var obj = Object.create(menuClass);
 
-	obj._shadow = element;
+	var select = element.getElementsByTagName('select')[0];
 
+	// Prepare list before object upgras
 	var list = [];
-	var options = element.getElementsByTagName('option');
+	var options = select.getElementsByTagName('option');
 
 	for (var i = 0; i < options.length; i++) {
 
@@ -25,18 +25,68 @@
 	  list.push(opt);
 	};
 
+	// Create object with list
+	var obj = Object.create(menuClass).upgradeTo(this)
+	  ._init(selectMenuItemClass, prefixClass, lengthFieldClass, list);
 
-	obj = obj.upgradeTo(this)
-	  ._init(menuItemClass, prefixClass, lengthFieldClass, list);
+	obj._container = element;
+	obj._select = select;
+	obj._select.style.display = 'none';
 
-	obj._firstActive = true;
+	// Create title
+	obj._title = obj._container.appendChild(document.createElement('span'));
+	obj._title.appendChild(document.createTextNode(''));
+	obj._container.appendChild(obj.element());
 
-	element.style.display = 'none';
 
-	if (element.parentNode)
-	  element.parentNode.appendChild(obj.element());
+	obj._container.addEventListener('click', obj.showSelected.bind(obj));
 
+
+	// Add index information to each item
+	for (i in obj._items) {
+	  obj._items[i]._index = i;
+	};
+
+	// This is only domspecific
+	obj.element().addEventListener('blur', function (e) {
+	  this.menu.hide();
+	  this.menu.showTitle();
+	});
+
+
+	// In case another tool changes
+	// the option via JS - this needs
+	// to be reflected!
+	select.addEventListener('change', function (e) {
+	  this.showTitle();
+	}.bind(obj));
+
+	obj.showTitle();
 	return obj;
+      },
+
+      select : function (index) {
+	if (arguments.length > 0) {
+	  this._selected = index;
+	  this._select.selectedIndex = index;
+	};
+
+	return this._selected || 0;
+      },
+
+      showSelected : function () {
+	this._title.style.display = 'none';
+	this._selected = this._select.selectedIndex;
+	this.show(this._selected);
+	this.focus();
+      },
+
+      showTitle : function () {
+	var s = this.select();
+	this._title.textContent = this.item(
+	  this.select()
+	).title();
+	this._title.style.display = 'inline';
       }
     }
   }
diff --git a/dev/js/src/selectMenu/item.js b/dev/js/src/selectMenu/item.js
new file mode 100644
index 0000000..cc6cdf0
--- /dev/null
+++ b/dev/js/src/selectMenu/item.js
@@ -0,0 +1,33 @@
+define(['menu/item'], function (itemClass) {
+  /**
+   * Menu item for select menus.
+   */
+
+  return {
+
+    /**
+     * Create new menu item
+     * for tree views.
+     */
+    create : function (params) {
+      return Object.create(itemClass)
+	.upgradeTo(this)._init(params);
+    },
+
+    /**
+     * Override click action of the menu item.
+     */
+    onclick : function (e) {
+      var menu = this.menu();
+      menu.hide();
+      // Index was set on initialization
+      menu.select(this._index);
+      menu.showTitle();
+      e.halt();
+    },
+
+    title : function () {
+      return this.content().textContent;
+    }
+  };
+});
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b2b9d6c..a959a08 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -25,7 +25,7 @@
     padding: 0;
     outline: none;
   }
-  span.select, #vc-choose { /* Formally vc.location */
+  span.select { /* , #vc-choose, Formally vc.location */
     cursor: pointer;
     line-height: 1.8em;
     border: {
@@ -49,8 +49,17 @@
       background-color: $light-green;
     }
   }
-  span.select::after {
-    content: $fa-down;
+  span.select {
+    &::after {
+      content: $fa-down;
+      padding: {
+	left: 4pt;
+	right: 4pt;
+      }
+    }
+    &.active::after {
+      content: $fa-up;
+    }
   }
 
   form {
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 070f26b..0bf2bbd 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -165,6 +165,13 @@
   }
 }
 
+ul.menu {
+  opacity: 0;
+}
+ul.menu.visible {
+  opacity: 1;
+}
+
 /**
  * Rolling menu
  */
@@ -202,5 +209,21 @@
   > li.active:hover {
     @include choose-remove;
   }
+}
 
-}
\ No newline at end of file
+/**
+ * select menu
+ */
+span.menu.select {
+  > span {
+    z-index: 100;
+  }
+  > ul.menu.roll {
+    display: none;
+    z-index: -100;
+    &.visible {
+      display: block;
+      z-index: 200;
+    }
+  }
+}
diff --git a/dev/scss/header/vc.scss b/dev/scss/header/vc.scss
index 45899da..9c48fbd 100644
--- a/dev/scss/header/vc.scss
+++ b/dev/scss/header/vc.scss
@@ -308,6 +308,7 @@
   border-radius: $standard-border-radius;
 }
 
+/*
 #vc-choose {
   &::after {
     content: $fa-down;
@@ -319,4 +320,5 @@
   &.active::after {
     content: $fa-up;
   }
-}
\ No newline at end of file
+}
+*/
\ No newline at end of file