diff --git a/public/css/menu.css b/public/css/menu.css
index 5f2bb5c..5b4a5d3 100644
--- a/public/css/menu.css
+++ b/public/css/menu.css
@@ -2,10 +2,13 @@
 
 ul.menu {
   position: absolute;
+  background-color: #7ba400;
+  font-weight: normal;
   border: 2px solid white;
   list-style-type: none;
   list-style-position: outside;
   padding-left: 0;
+  z-index: 16;
 }
 
 ul.menu > li {
@@ -51,6 +54,7 @@
   bottom: 0;
   border-top-width: 0;
   padding: .1em .3em;
-  margin-bottom: -1.6em;
+  margin-bottom: -1.7em;
   margin-right: -2px;
+  background-color: #7ba400;
 }
\ No newline at end of file
diff --git a/public/css/vc.css b/public/css/vc.css
index fe82f89..f4b6fc5 100644
--- a/public/css/vc.css
+++ b/public/css/vc.css
@@ -225,6 +225,15 @@
   font-weight: bold;
 }
 
+.vc .doc > span.key {
+  position: relative;
+}
+
+.vc .doc > span.key > ul {
+  margin: 0;
+  margin-left: 3.3em;
+}
+
 .vc .operators {
   color: #7ba400;
   border-color: white;
diff --git a/public/js/demo/vc.html b/public/js/demo/vc.html
index 4d561e1..048c168 100644
--- a/public/js/demo/vc.html
+++ b/public/js/demo/vc.html
@@ -6,6 +6,7 @@
     <script src="../src/menu.js"></script>
     <script src="../src/vc.js"></script>
     <link href="../../css/vc.css" rel="stylesheet" type="text/css"></link>
+    <link href="../../css/menu.css" rel="stylesheet" type="text/css"></link>
     <style type="text/css" rel="stylesheet">
 .info {
   background-color:white;
@@ -89,20 +90,6 @@
       document.getElementById("query").innerHTML = vc.root().toQuery();
     };
 
-    var menu = KorAP.FieldMenu.create([
-      ['Titel', 'title', 'string'],
-      ['Untertitel', 'subTitle', 'string'],
-      ['Veröffentlichungsdatum', 'pubDate', 'date'],
-      ['Autor', 'author', 'string']
-    ]);
-    menu.limit(3);
-    menu.show();
-
-    document.getElementById('menu').appendChild(menu.element());
-
-    menu.focus();
-
-
     </script>
 
     <hr />
diff --git a/public/js/src/menu.js b/public/js/src/menu.js
index 5e7537b..3d0017d 100644
--- a/public/js/src/menu.js
+++ b/public/js/src/menu.js
@@ -10,9 +10,12 @@
   "use strict";
 
   // Don't let events bubble up
-  Event.prototype.halt = function () {
-    this.stopPropagation();
-    this.preventDefault();
+  if (Event.halt === undefined) {
+    // Don't let events bubble up
+    Event.prototype.halt = function () {
+      this.stopPropagation();
+      this.preventDefault();
+    };
   };
 
   // Default maximum number of menu items
diff --git a/public/js/src/vc.js b/public/js/src/vc.js
index 00528aa..fa63457 100644
--- a/public/js/src/vc.js
+++ b/public/js/src/vc.js
@@ -1329,17 +1329,19 @@
    */
   KorAP._changeKey = function () {
     var doc = this.parentNode.refTo;
-    console.log(doc.type());
+    var key = doc.element().firstChild;
+    key.appendChild(KorAP.FieldChooser.element());
+    KorAP.FieldChooser.show();
+    KorAP.FieldChooser.focus();
     // key, matchop, type, value
   };
   
-
   // Field menu
   KorAP.FieldMenu = {
     create : function (params) {
       return Object.create(KorAP.Menu)
 	.upgradeTo(KorAP.FieldMenu)
-	._init(KorAP.FieldMenuItem, params)
+	._init(KorAP.FieldMenuItem, undefined, params)
     }
   };
 
@@ -1382,5 +1384,13 @@
       return this._element = li;
     }
   };
+
+  KorAP.FieldChooser = KorAP.FieldMenu.create([
+    ['Titel', 'title', 'string'],
+    ['Untertitel', 'subTitle', 'string'],
+    ['Veröffentlichungsdatum', 'pubDate', 'date'],
+    ['Autor', 'author', 'string']
+  ]);
+  KorAP.FieldChooser.limit(5);
  
 }(this.KorAP));