.menu { z-index:1000; margin:0px 0 0px 0px; /* this page only */ } /* remove all the bullets, borders and padding from the default list styling */ .menu ul { padding:0; margin:0; list-style-type:none; width:130px; } /* hack for IE5.5 */ * html .menu ul {margin-left:-16px; ma\rgin-left:0;} /* position relative so that you can position the sub levels */ .menu li { position:relative; height:26px; margin-top: 5px; margin-bottom: 5px; background-color: #0134FE; } .menu li li { position:relative; height:26px; background-color: #0134FE; font-size: 11px; margin: 0px; padding: 0px; } /* get rid of the table */ .menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em;} /* style the links */ .menu li a, .menu li a:visited { display:block; text-decoration:none; height:25px; line-height:25px; width:128px; color:#FFFFFF; text-indent:5px; border:1px solid #fff; font-family: Verdana; font-weight: bold; font-size: 12px; } .menu li li a, .menu li li a:visited { display:block; text-decoration:none; height:25px; line-height:25px; width:128px; color:#FFFFFF; text-indent:5px; font-family: Verdana; font-size: 9px; font-weight: normal; } /* hack for IE5.5 */ * html .menu a, * html .menu a:visited { w\idth:128px; background-color: #0134fe; } /* style the link hover */ * html .menu a:hover { color:#fff; background:#ba2000; font-family: Verdana; } .menu :hover > a { color:#fff; background:#ba2000; } /* 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:0; left:130px; } /* 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; } body { background-color: #FFFFFF; }