/* Son of Suckerfish Dropdowns --------------------------------------------------------- Originally developed by Patrick Griffiths and Dan Webb http://www.htmldog.com/articles/suckerfish/dropdowns/ --------------------------------------------------------- NOTE: After a deep research, we decide to divide this CSS into 2 parts. The first part will define the layout. The second part will define the visual look for this menu. ---------------------------------------------------------*/ /*--------------------------- LAYOUT ----------------------------*/ #ja-mainnav, #ja-mainnav ul { padding:0; margin:0; line-height:20px; height:39px; } #ja-mainnav a { display: block; line-height: 20px; margin: 0; padding: 10px 20px; } #ja-mainnav li { /* all list items */ float: left; margin: 0; padding: 0; } #ja-mainnav li ul { /* second-level lists */ position: absolute; width: 202px; /* * Using left instead of display to hide menus because display: none isn't * read by screen readers */ left: -999em; } #ja-mainnav ul ul a { /* sub-links */ width: 160px; } #ja-mainnav li ul ul { /* third-and-above-level lists */ margin: -42px 0 0 200px; } #ja-mainnav li:hover ul ul, #ja-mainnav li:hover ul ul ul, #ja-mainnav li.sfhover ul ul, #ja-mainnav li.sfhover ul ul ul { left: -999em; } #ja-mainnav li:hover ul, #ja-mainnav li li:hover ul, #ja-mainnav li li li:hover ul, #ja-mainnav li.sfhover ul, #ja-mainnav li li.sfhover ul, #ja-mainnav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } /*--------------------------- VISUAL ----------------------------*/ /* -------- All levels -------- */ #ja-mainnavwrap { background: url(../images/menubg.gif) no-repeat 0 0; height:39px; margin:0 1px 0 0; } #ja-mainnav ul, #ja-mainnav li { background-image:none; list-style:none; } #ja-mainnav span.separator { display:none; } /* -------- Top level -------- */ #ja-mainnav ul { padding-left:20px; } #ja-mainnav > ul > li { /*background-color: #444444; border-left: 1px solid #666666; border-right: 1px solid #333333;*/ margin-right: 1px; } #ja-mainnav > ul > li.active { background: url(../images/arrow2.png) no-repeat bottom center #444444; color: #CCCCCC; } #ja-mainnav > ul > li:hover, #ja-mainnav > ul > li:active, #ja-mainnav > ul > li:focus { background: url(../images/arrow2.png) no-repeat bottom center #555555; color: #FFFFFF; } /* -------- sub-levels -------- */ #ja-mainnav ul ul li { /* border-left: 1px solid #666666; border-right: 1px solid #333333; border-top: 1px solid #666666; border-bottom: 1px solid #333333; margin-bottom: 1px;*/ } #ja-mainnav li ul { /* second-level lists */ /*background-color: #555555;*/ } #ja-mainnav li a { color: #CCCCCC; font-weight: bold; text-decoration: none; } #ja-mainnav ul ul li:hover, #ja-mainnav ul ul li:active, #ja-mainnav ul ul li:focus { background: #444444; color: #FFFFFF; } /*old css*/ /* Son of Suckerfish Dropdowns --------------------------------------------------------- Originally developed by Patrick Griffiths and Dan Webb http://www.htmldog.com/articles/suckerfish/dropdowns/ --------------------------------------------------------- NOTE: After a deep research, we decide to divide this CSS into 2 parts. The first part will define the layout. The second part will define the visual look for this menu. ---------------------------------------------------------*/ #ja-mainnav ul.menu { margin:0; padding:0 0 0 15px; height:41px; float:left; text-transform:uppercase; font-weight:normal; } #ja-mainnav ul.menu ul { margin:0; padding:0; } #ja-mainnav ul.menu li { margin:0; padding: 0; float: left; display: block; background: none; cursor: pointer; position: relative; list-style: none; } #ja-mainnav ul.menu li ul { width: 16.4em; position: absolute; /* second-level lists */ z-index: 99; height: auto; w\idth: 15.9em; } #ja-mainnav ul.menu li ul ul { margin: -1.5em 0 0 14em; /* third-and-above-level lists */ } #ja-mainnav ul.menu li li { padding:0 1em 0 0; margin: 0; width: 14.9em; } #ja-mainnav ul.menu ul a { width: 14.8em; w\idth: 10.8em; } #ja-mainnav ul.menu li ul { left: -999em; } #ja-mainnav ul.menu li:hover ul ul, #ja-mainnav ul.menu li:hover ul ul ul, #ja-mainnav ul.menu li.sfhover ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul, #ja-mainnav ul.menu li.activesfhover ul ul, #ja-mainnav ul.menu li.sfhover ul ul ul, #ja-mainnav ul.menu li.parentsfhover ul ul ul, #ja-mainnav ul.menu li.parent-activesfhover ul ul ul, #ja-mainnav ul.menu li.activesfhover ul ul ul { left: -999em; } /* This "unhides" the sub-menus (left: -999em is what hides them) */ #ja-mainnav ul.menu li:hover ul, #ja-mainnav ul.menu li li:hover ul, #ja-mainnav ul.menu li li li:hover ul, #ja-mainnav ul.menu li.sfhover ul, #ja-mainnav ul.menu li.parentsfhover ul, #ja-mainnav ul.menu li.parent-activesfhover ul, #ja-mainnav ul.menu li.activesfhover ul, #ja-mainnav ul.menu li li.sfhover ul, #ja-mainnav ul.menu li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li.activesfhover ul, #ja-mainnav ul.menu li li li.sfhover ul, #ja-mainnav ul.menu li li li.havesubchildsfhover ul, #ja-mainnav ul.menu li li li.havesubchild-activesfhover ul, #ja-mainnav ul.menu li li li.activesfhover ul { left:auto; } /* STYLING THE MENU -----------------------------------*/ /* 1st level */ #ja-mainnav ul.menu li a { color:#CCC; font:bold 13px Verdana; padding:10px 20px 0; height:29px; display:block; line-height:normal; text-decoration: none; background: url(../images/mainnav_brd.gif) no-repeat center right; } #ja-mainnav ul.menu li.item1 { background:url(../images/mainnav_lt.gif) no-repeat 0 0; height:41px; } #ja-mainnav ul.menu li.item8 a { background:none; } #ja-mainnav ul.menu li a:hover, #ja-mainnav ul.menu li a:active, #ja-mainnav ul.menu li a:focus { color:#fff; background-color:#fc5d57; } #ja-mainnav ul.menu li { margin: 0; } #ja-mainnav ul.menu li:hover, #ja-mainnav ul.menu li.sfhover, #ja-mainnav ul.menu li.parentsfhover, #ja-mainnav ul.menu li.parent-activesfhover { color:#FFFFFF; } #ja-mainnav ul.menu li.active a, #ja-mainnav ul.menu li.active a:hover, #ja-mainnav ul.menu li.active a:active, #ja-mainnav ul.menu li.active a:focus { color:#FFFFFF; } /* 2nd level and above */ #ja-mainnav ul.menu li ul li { background:#494848; } #ja-mainnav ul.menu li ul a { border-right:none; padding:7px 10px; font-size:12px; font-weight:normal; background:none; height:auto; } #ja-mainnav ul.menu li.havesubchild, #ja-mainnav ul.menu li.havesubchild-active { background: url(../images/bullet2.gif) no-repeat 94% 50%; } #ja-mainnav ul.menu li ul a:hover, #ja-mainnav ul.menu li ul a:active, #ja-mainnav ul.menu li ul a:focus, #ja-mainnav ul.menu ul li:hover, #ja-mainnav ul.menu ul li.sfhover, #ja-mainnav ul.menu ul li.havesubchildsfhover, #ja-mainnav ul.menu ul li.havesubchild-activesfhover, #ja-mainnav ul.menu ul ul li:hover, #ja-mainnav ul.menu ul ul li.sfhover, #ja-mainnav ul.menu ul ul li.havesubchildsfhover, #ja-mainnav ul.menu ul ul li.havesubchild-activesfhover { background:#fc5d57; color:#fff; } #ja-mainnav ul.menu ul li.active a, #ja-mainnav ul.menu ul li.active a:hover, #ja-mainnav ul.menu ul li.active a:active, #ja-mainnav ul.menu ul li.active a:focus { background:none !important; color:#FFFFFF; font-weight:bold; } #ja-mainnav ul.menu li.active li a, #ja-mainnav ul.menu li.active li a:hover, #ja-mainnav ul.menu li.active li a:active, #ja-mainnav ul.menu li.active li a:focus { background: none !important; } #ja-mainnav h3 { display: none; } #ja-mainnav .moduletable_menu { background: none; margin: 0; padding: 0; }