/* suckerfish, horizontal, works in IE7 and Firefox 3 (others not tested), has javascript sfHover function dependency in : Biggest problem so far, when adding 'text-align: center;' to #nav-bar, menu centers, but sub-menu's lose alignment in IE7. */ #nav-bar { clear: left; float: left; width: 100%; _height: 1%; background-image: url('../files/nav_bg.png'); background-repeat: repeat-x; background-position: top; background-color: #ff6; margin: 0 0 1em 0; padding: 0; border-bottom: 1px solid #060; border-top: 1px solid #060; font-size: 90%; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1.2em; } #nav { margin-left: 1em; } #nav a { display: block; width: 8em; text-decoration: none; color: #060; font-weight: bold; } #nav a:hover { background-color: #fff; text-decoration: underline; } #nav li { /* all list items */ float: left; width: 8em; /* width needed or else Opera goes nuts */ padding: 0em 0; } #nav li ul { /* second-level lists */ position: absolute; /* background-image: url('../files/nav_bg2.png'); background-position: top; background-repeat: repeat-x; */ background-color: #ff6; width: 8em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ border: 1px solid black; padding: 0 0.5em; } #nav li ul { border-top: 1px solid white; } #nav li ul ul { /* third-and-above-level lists */ margin: -2em 0 0 8em; border: 1px solid black; border-left: 1px solid white; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } /* fix for IE7 sticky menus */ #nav li:hover, #nav li.hover { position: static; background-color: white; } #nav li.current { background-color: #ffb; } #content-container { clear: left; }