=== modified file 'lava_server/htdocs/css/default.css'
--- lava_server/htdocs/css/default.css	2011-11-18 15:38:45 +0000
+++ lava_server/htdocs/css/default.css	2011-11-22 16:57:13 +0000
@@ -60,33 +60,27 @@
 #lava-panel {
   background: black;
   color: #cccccc;
+
   font-family: 'Cantarell', sans-serif;
   font-weight: bold;
   font-size: 14px;
-  border-bottom: 2px solid #a1cd41;
 
-  width: 100%;
+  /*
+  border-bottom: 1px solid #333;
+  */
 
   display: box;
   display: -moz-box;
   display: -webkit-box;
+
+  width: 100%;
+  position: relative;
+  z-index: 1000;
 }
 
 #lava-panel.active {
-  border-color: white;
-  text-shadow: 0 0 2pt black;
-  background-image: linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%);
-  background-image: -o-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%);
-  background-image: -moz-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%);
-  background-image: -webkit-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%);
-  background-image: -ms-linear-gradient(bottom, rgb(158,158,158) 0%, rgb(0,0,0) 20%);
-  background-image: -webkit-gradient(
-    linear,
-    left bottom,
-    left top,
-    color-stop(0, rgb(158,158,158)),
-    color-stop(0.2, rgb(0,0,0))
-  );
+  background-color: white;
+  color: black;
 }
 
 #lava-panel .lava-panel-element {
@@ -95,9 +89,7 @@
 #lava-panel .lava-panel-element .lava-panel-menu-text {
   display: table-cell;
   vertical-align: middle;
-  padding: 1ex;
-  height: 40px;
-  max-height: 50px;
+  padding: 1.2ex 1ex;
 }
 
 #lava-panel .lava-panel-element:hover {
@@ -116,6 +108,7 @@
 
 #lava-panel .lava-panel-element.active {
   color: white;
+  background: #0084b0;
 }
 
 #lava-panel a {
@@ -138,24 +131,27 @@
 
   position: absolute;
   left: 0;
-  top: 50px;
-
-  background: #9e9e9e;
-  color: white;
-  border: 2px solid white;
-  border-top: none;
+  top: -1000px;
+
+  background: white;
+  color: black;
+
+  border: 1px solid #BBB;
+  border-radius: 0 0 3px 3px;
 
   margin: 0;
-  padding: 0;
-  display: none;
-  box-shadow: 2pt 2pt 2pt rgba(0, 0, 0, 0.4);
+  padding: 3px 0;
+  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
+
+  z-index: 1000;
 }
 
 #lava-panel ul.lava-panel-menu li {
   margin: 0;
   padding: 0;
-  font-size: 9pt;
-  font-weight: normal;
+  font-size: 10pt;
+  font-weight: bold;
+  text-shadow: 0 0 2pt #CCC;
 }
 
 #lava-panel ul.lava-panel-menu li a {
@@ -164,8 +160,9 @@
 }
 
 #lava-panel ul.lava-panel-menu li a:hover {
-  background-color: #757575;
   color: white;
+  background: #0084b0;
+  text-shadow: none;
 }
 
 /* User indicator */
@@ -233,6 +230,7 @@
   width: auto;
 }
 
+
 #lava-around-content:before {
   display: block;
   content: " ";
@@ -266,9 +264,11 @@
   background-color: white;
   border-radius: 8px;
   -moz-border-radius: 8px;
+  border: 10pt dashed yellow, 10pt dashed black;
   color: #444;
   margin: 1ex 0 75px 0;
   overflow-x: auto;
+  box-shadow: 3pt 3pt 5pt rgba(0,0,0, 0.4);
 }
 
 

=== modified file 'lava_server/templates/layouts/content.html'
--- lava_server/templates/layouts/content.html	2011-11-18 15:36:54 +0000
+++ lava_server/templates/layouts/content.html	2011-11-22 16:57:13 +0000
@@ -98,11 +98,13 @@
 
       function close_current_menu() {
         if (current_menu) {
+          console.log("--- closing current menu ---");
           current_menu.removeClass("active");
           current_menu = null;
         }
         if (current_sub_menu) {
-          current_sub_menu.slideUp("fast");
+          console.log("--- closing current sub menu ---");
+          current_sub_menu.offset({top: -1000, left: 0});
           current_sub_menu = null;
         }
       }
@@ -128,10 +130,14 @@
       // Clicking on a panel element with a menu does stuff
       $('.lava-panel-element.has-menu')
         .click(function(event) {
+
+          console.log("----------------------");
+
           // Enter hover-mode
           menu_should_open = true;
           $("#lava-panel").addClass("active");
-          if ($(this).next(".lava-panel-menu").is(":visible")) {
+
+          if ($(this).next(".lava-panel-menu").position().top > -500) {
             // Clicking on a menu with a visible sub-menu just triggers the link
             return;
           }
@@ -143,43 +149,72 @@
           var self = $(this);
           current_menu = self;
           current_sub_menu = self.next(".lava-panel-menu");
-          
+
+          // Add an 'active' class to the current menu, this showes up as a nice gradient
+          current_menu.addClass("active");
+
           // The top absolute position of the menu.
           // Defaults to the bottom border of the panel
-          // with the border size (2px) substracted to make
-          // both borders overlap and look nicer
-          var _top = $("#lava-panel").outerHeight(false) - 2;
+          var _top = $("#lava-panel").outerHeight(true);
+          _top += 1;
 
           // The left absolute position of the menu.
           // defaults to the offset of the indicator span
-          var _left = $(this).offset().left;
-
-          // Same with the right menu, the right margin
-          var _width = $(this).width();
+          var _left = current_menu.offset().left;
+          console.log("_left is ", _left);
+
+          // Same with the right menu, the right margin
+          var _menu_width = current_menu.width();
+          console.log("_menu_width is ", _menu_width);
+
+          // Same with the right menu, the right margin
+          var _sub_menu_width = current_sub_menu.width();
+          console.log("_sub_menu_width is ", _sub_menu_width);
 
           // Adjust the width to consider the border of the pop-up menu.
-          var width_adj = current_sub_menu.outerWidth() - current_sub_menu.width();
-          _width -= width_adj;
-
-          // Don't set the width if it would make the menu too short.
-          if (_width < current_sub_menu.width()) {
-            _width = null;
-          }
-
-          // Add an 'active' class to the current menu, this showes up as a nice gradient
-          current_menu
-            .addClass("active");
-          // Repositiobn and slide down the sub menu
+          var _sub_menu_width_adj = current_sub_menu.outerWidth() - current_sub_menu.width();
+          console.log("_sub_menu_width_adj is ", _sub_menu_width_adj);
+
+          // Take border width into account
+          if (_sub_menu_width_adj != 0) {
+            _sub_menu_width -= _sub_menu_width_adj;
+            console.log("_sub_menu_width changes to ", _sub_menu_width);
+          }
+
+          // Check how much space we have left
+          var _space_left = $("#lava-panel").width() - _left - current_sub_menu.outerWidth(true);
+          console.log("_space left is ", _space_left);
+
+          // If we ran out of space then let's move the whole thing to the left
+          // This is only needed for the user indicator.
+          if (_space_left < 0) {
+            _left += _space_left;
+            _sub_menu_width += _sub_menu_width_adj;
+            console.log(
+              "sub-menu would go off-screen",
+              " _left changes to ", _left,
+              " _sub_menu_width changes to ", _sub_menu_width
+            );
+          }
+
+          // Don't set the width if it would make the menu too narrow.
+          if (_sub_menu_width < _menu_width) {
+            _sub_menu_width = _menu_width - _sub_menu_width_adj;
+            console.log("sub-menu is too narrow, _sub_menu_width changes to ", _menu_width);
+          }
+
+          // Place & resize the sub menu
+          console.log("Setting position to ", {top: _top, left: _left});
+          console.log("Setting width to ", _sub_menu_width);
           current_sub_menu
-            .css({
-              top: _top,
-              left: _left,
-              width: _width
-            })
-            .slideDown("fast")
-            .show()
+            .width(_sub_menu_width)
+            .offset({left: _left, top: _top})
             .bind('mouseleave', function() { close_current_menu(); });
+          // Slide it down
+          // .slideDown("fast")
+          // And bind a mouse leave event to close it when
         });
+
     });
   </script>
 

