.menu { position:relative; z-index:1000; float:left; height:380px; }

.menu h1 { color:#fff; font-size:50px; font-family:serif; width:145px; text-align:center; }

/* remove all the bullets, borders and padding from the default list styling */

.menu ul { padding:0; margin:0; list-style-type:none; width:150px; position:relative; }



.menu li { background:transparent;  }

/* get rid of the table */

.menu table { position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0; }



/* style the links */

.menu a, .menu a:visited { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; display:block; text-decoration:none; width:150px; color:#640201; background:transparent; text-align:left; padding-left:5px; padding-top:5px; padding-bottom:5px; }

/* style the link hover */

* html .menu a:hover { position:relative; white-space:normal; color:#CC0033; text-decoration:none; }



.sub a, .sub a:visited { color:#FFFFFF; font-weight:normal; }



.menu li:hover { position:relative; }

.menu :hover > a { color:#CC0033; text-decoration:none; }



/* hide the sub levels and give them a positon absolute so that they take up no room */

.menu ul ul { visibility:hidden; position:absolute; top:0px; left:140px; }

/* 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; }

/* keep the third level hidden when you hover on first level list OR link */

.menu ul :hover ul ul{ visibility:hidden; }

/* keep the fourth level hidden when you hover on second level list OR link */

.menu ul :hover ul :hover ul ul{ visibility:hidden; }

/* make the third level visible when you hover over second level list OR link */

.menu ul :hover ul :hover ul{ visibility:visible; }

/* make the fourth level visible when you hover over third level list OR link */

.menu ul :hover ul :hover ul :hover ul { visibility:visible; }