diff --git a/htdocs/davical.css b/htdocs/davical.css
index e00e7af2..741d865e 100644
--- a/htdocs/davical.css
+++ b/htdocs/davical.css
@@ -163,73 +163,7 @@ li.messages {
 display:inherit;
 }
 
-#menu {
-background-color: white;
-color: white;
-font-weight: bold;
-padding: 0.8em 0.4em 0.2em 0;
-margin-bottom: 0;
-height:1.3em;
-border-bottom:1px solid #ABF;
-}
 
-#menu a.menu, #menu a.menu:hover, #menu a.menu_active, #menu a.menu_active:hover {
-color: #999;
-text-decoration: none;
-background-color: #DEF;
-padding: 0.2em 0.4em;
-margin-right: 0.4em;
-height:1.3em;
-border: 1px solid #ABF;
--moz-border-radius-topright: 0.8em;
--moz-border-radius-topleft: 0.8em;
-
-}
-
-#menu a.menu:hover, #menu a.menu_active:hover {
-color: white;
-background-color: #BCF;
-}
-
-#menu a.menu_active, #menu a.menu_active:hover {
-background-color: white;
-color: #008;
-border-bottom:1px solid white;
-}
-
-
-#submenu {
-margin-top:0.3em;
-background-color: white;
-color: white;
-font-weight: bold;
-margin-bottom: 1px;
-border-bottom:1px solid #ABF;
-height:20px;
-}
-
-#submenu a.submenu, #submenu a.submenu:hover, #submenu a.submenu_active, #submenu a.submenu_active:hover {
-color: #999;
-text-decoration: none;
-background-color: #DEF;
-padding: 1px 0.2em;
-margin-right: 0.2em;
-border: 1px solid #ABF;
-height:20px;
--moz-border-radius-topright: 0.8em;
--moz-border-radius-topleft: 0.8em;
-}
-
-#submenu a.submenu:hover, #submenu a.submenu_active:hover {
-color: white;
-background-color: #ABF;
-}
-
-#submenu a.submenu_active, #submenu a.submenu_active:hover {
-background-color: white;
-color: #009;
-border-bottom:1px solid white;
-}
 .fsubmit {
 background-color: white;
 font-family: Bitstream Vera Sans, Vera Sans, sans-serif;
@@ -285,3 +219,134 @@ border:2px inset #800;
 .w20 { width: 20em; }
 .w15 { width: 15em; }
 .w10 { width: 10em; }
+
+/* Handle the menus, usually at the top of the screen */
+
+div.menu {
+  width:100%;
+  font-size:1em;
+  display:block;
+  height:1.5em;
+/*  position:absolute; */
+/*  z-index:100; */
+  background-color:#e0e0ef;
+/*  border: 1px red solid; */
+/*  background-color: #c7d0d9;
+  border: thin outset #b0b0e0; */
+  z-index: 10;
+}
+
+#related  {
+background-color: white;
+color: white;
+font-weight: bold;
+padding: 0.8em 0.4em 0.2em 0;
+margin-bottom: 0;
+height:1.3em;
+border-bottom:1px solid #ABF;
+}
+
+#related a.menu, #related a.menu:hover, #related a.menu_active, #related a.menu_active:hover {
+color: #999;
+text-decoration: none;
+background-color: #DEF;
+padding: 0.2em 0.4em;
+margin-right: 0.4em;
+height:1.3em;
+border: 1px solid #ABF;
+-moz-border-radius-topright: 0.8em;
+-moz-border-radius-topleft: 0.8em;
+
+}
+
+#related a.menu:hover, #related a.menu_active:hover {
+color: white;
+background-color: #BCF;
+}
+
+#related a.menu_active, #related a.menu_active:hover {
+background-color: white;
+color: #008;
+border-bottom:1px solid white;
+}
+
+
+/* remove all the bullets, borders and padding from the default list styling */
+.menu ul {
+  width:100%;
+  padding:0;
+  margin:0;
+  list-style-type:none;
+  display:block;
+  height:1.4em;
+  position: fixed;
+  top: 0px;
+  background-color: #c7d0d9;
+  border: thin outset #b0b0e0;
+}
+
+/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
+.menu li {
+  float:left;
+  position:relative;
+  padding:0;
+  display: inline;
+}
+
+/* style the links for the top level */
+.menu a, .menu a:visited {
+  display:block;
+  font-weight: bold;
+  font-family: sans-serif;
+  text-decoration:none;
+  color:navy;
+  height:1.2em;
+  vertical-align:middle;
+  border:0 solid #fff;
+  background-color:#f0f0ff;
+  border-width:0;
+  padding: 0.1em 1em;
+  margin: 0;
+  line-height:100%;
+/*  border: 1px green dashed; */
+}
+
+/* hide the sub levels and give them a positon absolute so that they take up no room */
+.menu ul ul {
+  visibility:hidden;
+  position:absolute;
+  text-decoration:none;
+  height:0;
+  top:1.4em;
+  left:0;
+}
+
+/* style the second level links */
+.menu ul ul a,
+.menu ul ul a:visited {
+  background:#f0f0ff;
+  color:navy;
+  font-family: sans-serif;
+  border-bottom: 1px solid #cccccc;
+  height:auto;
+  line-height:1em;
+  padding:0.2em 0.3em;
+  width:12em;
+}
+
+/* style the top level hover */
+.menu :hover > a,
+.menu ul ul :hover > a,
+.menu a:hover,
+.menu ul ul a:hover {
+  background-color:#3050c0;
+  color:#f0f0a0;
+  text-decoration:none;
+}
+
+/* make the second level visible when hover on first level list OR link */
+.menu ul li:hover ul,
+.menu ul a:hover ul{
+  visibility:visible;
+}
+