/*------------------------------------------------------------------------ # JA Tube for Joomla 1.5.10 - Version 1.0 - Licence Owner JA159192 # ------------------------------------------------------------------------ # Copyright (C) 2004-2008 J.O.O.M Solutions Co., Ltd. All Rights Reserved. # @license - Copyrighted Commercial Software # Author: J.O.O.M Solutions Co., Ltd # Websites: http://www.joomlart.com - http://www.joomlancers.com # This file may not be redistributed in whole or significant part. -------------------------------------------------------------------------*/ /* 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-cssmenu { margin: 0; padding: 0; position: relative; } #ja-cssmenu ul { margin: 0; padding: 0; } #ja-cssmenu li { background: url(../../images/mainnav-sep.gif) repeat-y right; cursor: pointer; display: block; float: left; margin: 0 2px; padding: 0 14px 0 0; position: relative; } #ja-cssmenu li ul { height: auto; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ position: absolute; /* second-level lists */ width: 14.9em; width: 15.4em; z-index: 99; } #ja-cssmenu li ul ul { margin: -2em 0 0 15em; /* third-and-above-level lists */ } #ja-cssmenu li li { margin: 0; padding: 0 1.5em 0 0; width: 13.9em; } #ja-cssmenu ul a { w\idth: 9.8em; width: 13.8em; } #ja-cssmenu li:hover ul ul, #ja-cssmenu li:hover ul ul ul, #ja-cssmenu li.sfhover ul ul, #ja-cssmenu li.havechildsfhover ul ul, #ja-cssmenu li.havechild-activesfhover ul ul, #ja-cssmenu li.activesfhover ul ul, #ja-cssmenu li.sfhover ul ul ul, #ja-cssmenu li.havechildsfhover ul ul ul, #ja-cssmenu li.havechild-activesfhover ul ul ul, #ja-cssmenu li.activesfhover ul ul ul { left: -999em; } /* This "unhides" the sub-menus (left: -999em is what hides them) */ #ja-cssmenu li:hover ul, #ja-cssmenu li li:hover ul, #ja-cssmenu li li li:hover ul, #ja-cssmenu li.sfhover ul, #ja-cssmenu li.havechildsfhover ul, #ja-cssmenu li.havechild-activesfhover ul, #ja-cssmenu li.activesfhover ul, #ja-cssmenu li li.sfhover ul, #ja-cssmenu li li.havesubchildsfhover ul, #ja-cssmenu li li.havesubchild-activesfhover ul, #ja-cssmenu li li.activesfhover ul, #ja-cssmenu li li li.sfhover ul, #ja-cssmenu li li li.havesubchildsfhover ul, #ja-cssmenu li li li.havesubchild-activesfhover ul, #ja-cssmenu li li li.activesfhover ul { left: 0; } /* STYLING THE MENU -----------------------------------*/ /* 1st level */ #ja-cssmenu li a { color: #4F4F4F; display: block; float: left; font-size: 92%; font-weight: bold; height: 30px; line-height: 30px; padding: 0 0 0 15px; text-decoration: none; text-transform: none; } #ja-cssmenu a span { display: block; float: left; height: 30px; line-height: 30px; padding: 0 15px 0 0; } #ja-cssmenu li a:hover, #ja-cssmenu li a:active, #ja-cssmenu li a:focus { background: url(../../images/mainnav-hover.gif) repeat-x left center; color: #CCCCCC; } #ja-cssmenu li:hover a, #ja-cssmenu li.sfhover a, #ja-cssmenu li.havechildsfhover a, #ja-cssmenu li.havechild-activesfhover a { background: url(../../images/mainnav-hover.gif) repeat-x left center; color: #FFFFFF; } #ja-cssmenu li:hover a span, #ja-cssmenu li.sfhover a span, #ja-cssmenu li.havechildsfhover a span, #ja-cssmenu li.havechild-activesfhover a span{ background: url(../../images/mainnav-hover.gif) no-repeat right center; } #ja-cssmenu li a.active, #ja-cssmenu li a.active:hover, #ja-cssmenu li a.active:active, #ja-cssmenu li a.active:focus { background: url(../../images/mainnav-hover.gif) repeat-x left center; color: #FFFFFF; } #ja-cssmenu a:hover span, #ja-cssmenu a:active span, #ja-cssmenu a:focus span { background: url(../../images/mainnav-hover.gif) repeat-x right center; cursor: pointer; } #ja-cssmenu li.active a:hover, #ja-cssmenu li.active a:active, #ja-cssmenu li.active a:focus { background: url(../../images/mainnav-hover.gif) no-repeat left center; color: #FFFFFF; } #ja-cssmenu li.active a { background: url(../../images/mainnav-active.gif) no-repeat left center; color: #FFFFFF; } #ja-cssmenu li.active a:hover span, #ja-cssmenu li.active a:active span, #ja-cssmenu li.active a:focus span { background: url(../../images/mainnav-hover.gif) no-repeat right center; cursor: pointer; } #ja-cssmenu li.active a span { background: url(../../images/mainnav-active.gif) no-repeat right center; cursor: pointer; } /* 2nd level and above */ #ja-cssmenu li ul { background: #454545; border: 1px solid #5A5A5A; border-top: none; top: 27px; } #ja-cssmenu li ul ul { border: 1px solid #333333; } #ja-cssmenu li ul li { background: none; border-right: none; border-top: 1px solid #5A5A5A; } #ja-cssmenu li ul a { background: none !important; border-right: none; color: #CCCCCC!important; font-weight: normal; height: auto; line-height: normal; margin: 0; text-transform: none; white-space: nowrap; } #ja-cssmenu li ul a span { background: none !important; } #ja-cssmenu li.havesubchild, #ja-cssmenu li.havesubchild-active { } #ja-cssmenu li ul a:hover, #ja-cssmenu li ul a:active, #ja-cssmenu li ul a:focus, #ja-cssmenu ul li:hover, #ja-cssmenu ul li.sfhover, #ja-cssmenu ul li.havesubchildsfhover, #ja-cssmenu ul li.havesubchild-activesfhover, #ja-cssmenu ul ul li:hover, #ja-cssmenu ul ul li.sfhover, #ja-cssmenu ul ul li.havesubchildsfhover, #ja-cssmenu ul ul li.havesubchild-activesfhover { background: #333333; color: #FFFFFF !important; } #ja-cssmenu ul li a.active { background: none !important; font-weight: bold !important; } #ja-cssmenu ul li a.active:hover, #ja-cssmenu ul li a.active:active, #ja-cssmenu ul li a.active:focus { color: #FFFFFF !important; }