Greetings Experts:
I am working on a Joomla 1.5 based site and am using the kc_cufon plugin (http://www.keashly.net/typography/kc...nt-replacement) for my main navigation menu items - which works perfectly. It's a mega-menu structure and, unfortunately, the cufon seems to be affecting my sub-navigation items upon mouse hover/rollover - which is an unwanted effect. I want the sub items (within the drop-down) to be Arial font.
Here is the url to my WIP: www.musicians-marketplace.com/zeo2
The Main Navigation menu is across the top (i.e. Guitars-Drums-Keyboards, etc.). Note the sub-navigation items when you rollover with your mouse - the font changes to the "League Gothic" font I specified for the main navigation items.
Here is the CSS for the top level nav items . . .
#ja-mainnav ul.level0 li a {
display: block;
text-decoration: none;
font-size: 30px;
color: #000;
font-weight: 200;
padding-top: 16px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 0px;
height: 28px;
text-transform: uppercase;
}
#ja-mainnav ul.level0 li a:hover,
#ja-mainnav ul.level0 li a:active,
#ja-mainnav ul.level0 li a:focus
#ja-mainnav ul.level0 li:hover a,
#ja-mainnav ul.level0 li.sfhover a,
#ja-mainnav ul.level0 li.havechildsfhover a,
#ja-mainnav ul.level0 li.havechild-activesfhover a {
color: #00F;
}
#ja-mainnav ul.level0 li.havechild:hover a,
#ja-mainnav ul.level0 li.havechild:focus a,
#ja-mainnav ul.level0 li.havechild:active a {
}
#ja-mainnav ul.level0 li a.active,
#ja-mainnav ul.level0 li a.active:hover,
#ja-mainnav ul.level0 li a.active:active,
#ja-mainnav ul.level0 li a.active:focus {
}
ul.level0 li.mega li.mega {
text-align: left;
float: none !important;
}
and here is the CSS for the font for the subvav items . . .
#ja-mainnav ul.level0 li ul li {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
border-bottom-width: 1px;
border-right-style: none;
border-bottom-style: none;
border-bottom-color: #E7E7E7;
}
#ja-mainnav ul.level0 li ul li.group {
background-image: none;
border: 0px;
padding-bottom: 1px;
}
/* Category Sub Items --- */
#ja-mainnav ul.level0 li ul a {
border-right: none;
margin: 0;
height: auto;
line-height: normal !important;
background: none !important;
text-transform: none;
font-weight: normal;
font-size: 11px;
white-space: nowrap;
color: #333 !important;
padding-top: 2px;
padding-right: 10px;
padding-bottom: 2px;
padding-left: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#ja-mainnav ul.level0 li.havesubchild,
#ja-mainnav ul.level0 li.havesubchild-active {
background: url(../../images/menu-bg.gif) repeat-x left bottom;
}
#ja-mainnav ul.level0 li ul a:hover,
#ja-mainnav ul.level0 li ul a:active,
#ja-mainnav ul.level0 li ul a:focus,
#ja-mainnav ul.level0 ul li.over,
#ja-mainnav ul.level0 ul li.sfhover,
#ja-mainnav ul.level0 ul li.havesubchildsfhover,
#ja-mainnav ul.level0 ul li.havesubchild-activesfhover {
color: #54992F !important;
}
/* Styling ---*/
ul.level1 li.mega a.mega {
background: none;
border: 0;
font-weight: normal;
padding: 0px;
}
ul.level1 li.mega a.mega span.menu-title {
background: none;
padding: 0;
font-size: 110%;
color: #000;
}
ul.level1 li.haschild {
background: url(../../images/arrow.png) no-repeat 95% center;
padding: 0;
}
I have tried to specify the font for the sub-nav items using the cufon plugin and utilizing the relative css classes - but it does not seem to work.
Any thoughts on how to overcome this issue so that the sub-nav items display with the Arial font I want them to?
TOM