/*** ESSENTIAL STYLES ***/ .sf-menu, .sf-menu * { margin: 0; padding: 0; list-style: none; } .sf-menu { line-height: 1.0; } .sf-menu ul { position: absolute; top: -999em; width: 150px; /* left offset of submenus need to match (see below) */ } .sf-menu ul li { width: 100%; } .sf-menu li:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ } .sf-menu li { float: left; position: relative; width: auto; } .sf-menu a { display: block; position: relative; } #category-menu .sf-menu li:hover ul, #category-menu .sf-menu li.sfHover ul { left: 0; top: 50px; /* match top ul list item height */ z-index: 100; } #page-menu .sf-menu li:hover ul, #page-menu .sf-menu li.sfHover ul { left: -20px; top: 40px; /* match top ul list item height */ z-index: 100; } ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; } ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { left: 150px; /* match ul width */ top: 0px!important; } ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; } ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { left: 150px; /* match ul width */ top: 0px!important; } /** PAGE MENU */ #page-menu .sf-menu a, #page-menu .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ height: 40px; line-height: 40px; margin: 0 20px 0 0; color: #505050; text-decoration: none; text-shadow: 1px 1px 0px #000; } #page-menu .sf-menu .current_page_item a { color: #fff; } #page-menu .sf-menu li:hover, #page-menu .sf-menu li.sfHover, #page-menu .sf-menu a:focus, #page-menu .sf-menu a:hover, #page-menu .sf-menu a:active, #page-menu .sf-menu li.current { color:#fff; outline: 0; } #page-menu .sf-menu li li a, #page-menu .sf-menu li li a:visited { margin: 0px; padding: 0 20px; height: 30px; line-height: 30px!important; background: transparent url(bg-page-.png) repeat left top; } #page-menu .sf-menu li li:hover, #page-menu .sf-menu li li.sfHover, #page-menu .sf-menu li li a:focus, #page-menu .sf-menu li li a:hover, #page-menu .sf-menu li li a:active, #page-menu .sf-menu li li.current { background: none; outline: 0; } #page-menu .sf-menu li li a:hover { color: #fff; } #page-menu .sf-menu li li a:hover, #page-menu .sf-menu li li a:active, #page-menu .sf-menu li li a:focus, #page-menu .sf-menu li li a:visited { background: transparent url(bg-page-.png) repeat left top; } /** CATEGORY MENU */ #category-menu .sf-menu a, #category-menu .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ height: 50px; line-height: 50px; padding: 0 20px; color: #fff; text-decoration: none; text-shadow: 1px 1px 0px #000; } #category-menu .sf-menu li:hover, #category-menu .sf-menu li.sfHover, #category-menu .sf-menu a:focus, #category-menu .sf-menu a:hover, #category-menu .sf-menu a:active, #category-menu .sf-menu li.current-cat, #category-menu .sf-menu li.current { color:#fff; background: transparent url(bg-cat-m.jpg) repeat-x left top; outline: 0; } #category-menu .sf-menu li li a, #category-menu .sf-menu li li a:visited { padding: 0 20px; height: 30px!important; line-height: 30px!important; background: transparent url(bg-dropd.png) repeat left top; } #category-menu .sf-menu li li:hover, #category-menu .sf-menu li li.sfHover, #category-menu .sf-menu li li a:focus, #category-menu .sf-menu li li a:hover, #category-menu .sf-menu li li a:active, #category-menu .sf-menu li li.current-cat, #category-menu .sf-menu li li.current { background: none; outline: 0; } #category-menu .sf-menu li li a:hover { background: transparent url(bg-dropd.png) repeat left top; color: #505050; }