/* # ------------------------------------------------------------------------ # JA Kyanite - Version 1.0 - Licence Owner JA176547 # ------------------------------------------------------------------------ # Copyright (C) 2004-2009 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; /* all lists */ padding: 0; float: left; } #ja-cssmenu ul { margin: 0; /* all lists */ padding: 0; } #ja-cssmenu li { margin: 0; /* all list items */ padding: 0; float: left; display: block; background: url(../../images/mainnav-sep.gif) no-repeat right top; height: 48px; cursor: pointer; } #ja-cssmenu li ul { width: 16.4em; position: absolute; /* second-level lists */ z-index: 99; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ height: auto; w\idth: 15.9em; } #ja-cssmenu li ul ul { margin: -2.5em 0 0 15em; /* third-and-above-level lists */ } #ja-cssmenu li li { padding: 0 1em 0 0; margin: 0; width: 14.9em; } #ja-cssmenu ul a { width: 14.8em; w\idth: 10.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: auto; } /* STYLING THE MENU -----------------------------------*/ /* 1st level */ #ja-cssmenu li a { color: #ccc; display: block; font-weight: bold; margin: 0; padding: 0 15px; height: 48px; text-decoration: none; text-transform: uppercase; } * html #ja-cssmenu li a { height: auto; margin-bottom: 8px; } #ja-cssmenu span.menu-title { text-shadow: 0 1px 0 #111; } #ja-cssmenu span.menu-desc { text-transform: none; } #ja-cssmenu ul span.menu-title { text-shadow: none; } #ja-cssmenu li a.first-item { border-left: 0; } #ja-cssmenu li a.last-item { border-right: 0; } #ja-cssmenu li a:hover, #ja-cssmenu li a:active, #ja-cssmenu li a:focus, #ja-cssmenu li:hover, #ja-cssmenu li.sfhover, #ja-cssmenu li.havechildsfhover, #ja-cssmenu li.havechild-activesfhover, #ja-cssmenu li a.active, #ja-cssmenu li a.active:hover, #ja-cssmenu li a.active:active, #ja-cssmenu li a.active:focus { background-image: url(../../images/mainnav-bg.gif); background-repeat: no-repeat; color: #fff; } #ja-cssmenu li a:hover, #ja-cssmenu li a:active, #ja-cssmenu li a:focus { background-position: -50px -48px; } #ja-cssmenu li:hover, #ja-cssmenu li.sfhover, #ja-cssmenu li.havechildsfhover, #ja-cssmenu li.havechild-activesfhover { background-position: -50px -48px; } #ja-cssmenu li a.first-item:hover, #ja-cssmenu li a.first-item:active, #ja-cssmenu li a.first-item:focus { background-position: 0 -48px; } #ja-cssmenu li a.active, #ja-cssmenu li a.active:hover, #ja-cssmenu li a.active:active, #ja-cssmenu li a.active:focus { background-position: -450px -48px; } #ja-cssmenu li a.active.first-item, #ja-cssmenu li a.active.first-item:hover, #ja-cssmenu li a.active.first-item:active, #ja-cssmenu li a.active.first-item:focus { background-position: -403px -48px; } #ja-cssmenu li a:hover span.menu-title, #ja-cssmenu li a:active span.menu-title, #ja-cssmenu li a:focus span.menu-title, #ja-cssmenu li a.active span.menu-title, #ja-cssmenu li a.active:hover span.menu-title, #ja-cssmenu li a.active:active span.menu-title, #ja-cssmenu li a.active:focus span.menu-title { text-shadow: 0 1px 0 #333; } /* 2nd level and above */ #ja-cssmenu li ul { border: 1px solid #999; border-top: 0; margin-top: -3px; background: url(../../images/grad-d1.gif) repeat-x bottom #666; } #ja-cssmenu li ul li { border-top: 1px solid #999; background: none; height: auto; } #ja-cssmenu li ul a { border-right: 0; border-left: 0; margin: 0; padding: 7px 15px 7px; background: none; color: #e6e6e6; font-weight: normal; line-height: normal; height: auto; text-transform: none; } #ja-cssmenu li ul a span.menu-title { padding-top: 0; text-shadow: none !important; } #ja-cssmenu li.havesubchild, #ja-cssmenu li.havesubchild-active { background: url(../../images/bullet2.gif) no-repeat 94% 50%; } #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: #333; color: #fff; } #ja-cssmenu ul li a.active, #ja-cssmenu ul li a.active:hover, #ja-cssmenu ul li a.active:active, #ja-cssmenu ul li a.active:focus { background: none !important; color: #fff; font-weight: bold; }