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;
+    }
+  };
+});