--- a/css/viewer_form.css	Sat Mar 23 05:06:25 2013 +0900
+++ b/css/viewer_form.css	Sat Mar 23 06:00:26 2013 +0900
@@ -111,6 +111,7 @@
 
 div.menuContent { 
     position:relative;
+//    position:absolute;
     background:#ddd;
     width:80%;
     border-radius:5px;

--- a/index.html	Sat Mar 23 05:06:25 2013 +0900
+++ b/index.html	Sat Mar 23 06:00:26 2013 +0900
@@ -619,7 +619,13 @@
 })
 
 
-
+function calcChildrenHeight(childArray) {
+    var height = 0;
+    for (var i=0; i<childArray.length; i++) {
+	height = height + childArray[i].offsetHeight + BASE_MARGIN;
+    }
+    return height;
+}
 
 function addMenuBody(menuBodyDiv, menuContentDiv) {
     menuBodyDiv.insertBefore(menuContentDiv);
@@ -633,6 +639,48 @@
     $('#stateMenuBody').children().remove();    
 }
 
+function showMenuBody(menu) {
+    var body = $(menu.children()[1]);
+    var childArray = body.children();
+    console.log(childArray);
+    $(childArray).css('visibility','visible');
+    body.viewFlag = true;
+    var height = calcChildrenHeight(childArray);
+    menu.css('height', height+'px');    
+}
+
+function showStateMenuBody() {
+    showMenuBody($('#stateMenu'));
+}
+
+function showTraverseMenuBody() {
+    showMenuBody($('#traverseMenu'));
+}
+
+function hiddenMenuBody(menu, height) {
+    var body = $(menu.children()[1]);
+    var childArray = body.children();
+    $(childArray).css('visibility','hidden');
+    body.viewFlag = false;
+    menu.css('height', height+'px');    
+}
+
+function hiddenStateMenuBody() {
+    var height = DefaultSelectMenuInfo.stateMenuHeight;
+    hiddenMenuBody($('#stateMenu'), height);
+}
+
+function hiddenTraverseMenuBody() {
+    var height = DefaultSelectMenuInfo.traverseMenuHeight;
+    hiddenMenuBody($('#traverseMenu'), height);
+}
+
+var MENU_BORDER_MARGIN = 2*parseInt($('.menu').css('border-top-width').split('px')[0]);
+var DefaultSelectMenuInfo = {
+    stateMenuHeight : $('#stateMenu')[0].offsetHeight - MENU_BORDER_MARGIN,
+    traverseMenuHeight : $('#traverseMenu')[0].offsetHeight - MENU_BORDER_MARGIN
+};
+
 function createStateSelectMenu() {
     removeStateMenuBody();
     var stateMenu = $('#stateMenu');
@@ -640,15 +688,10 @@
     var rejected = $('<div class="menuContent" >reject</div>');
     var retract = $('<div class="menuContent" >retract</div>');
     var body = $('#stateMenuBody');
-    var fc = body[0].firstChild;
-    if (fc) {
-	body[0].insertBefore(accepted[0], fc);
-	body[0].insertBefore(rejected[0], fc);
-	body[0].insertBefore(retract[0], fc);
-    } else {
-	
-    }
-
+    body.viewFlag = true;
+    body.append(accepted);
+    body.append(rejected);
+    body.append(retract);
 }
 
 var BASE_MARGIN = parseInt($('.menu').css('margin-top').split('px')[0])*2 +