We currently use pictures with a rollover command for the main menu of our navbar, but the pictures is a pain in the butt and makes the page take a little longer to load. I'm tying to streamline the loading process, since we are already very graphic intensive...

I'm trying to get the submenu items of our navbar to be a smaller font size & different font, so I can get rid of the pictures, and make the main line one font & size, and the submenu items a different font and size. Here is the code that I'm working with:



var NoOffFirstLineMenus=8; // Number of first level items

var LowBgColor='#0b301c'; // Background color when mouse is not over

var LowSubBgColor='#0b301c'; // Background color when mouse is not over on subs

var HighBgColor='0b301c'; // Background color when mouse is over

var HighSubBgColor='white'; // Background color when mouse is over on subs

var FontLowColor='white'; // Font color when mouse is not over

var FontSubLowColor='white'; // Font color subs when mouse is not over

var FontHighColor='#f2e393'; // Font color when mouse is over

var FontSubHighColor='#0b301c'; // Font color subs when mouse is over

var BorderColor='#0b301c'; // Border color

var BorderSubColor='#f7daa9'; // Border color for subs

var BorderWidth=0; // Border width

var BorderBtwnElmnts=1; // Border between elements 1 or 0

var FontFamily="ariel, helvetica, trebuchet, sans-serif" // Font family menu items

var FontSize=10; // Font size menu items

var FontBold=0; // Bold menu items 1 or 0

var FontItalic=0; // Italic menu items 1 or 0

var MenuTextCentered='left'; // Item text position 'left', 'center' or 'right'

var MenuCentered='left'; // Menu horizontal position 'left', 'center' or 'right'

var MenuVerticalCentered='top'; // Menu vertical position 'top', 'middle','bottom' or static

var ChildOverlap=0; // horizontal overlap child/ parent

var ChildVerticalOverlap=0; // vertical overlap child/ parent

var StartTop=0; // Menu offset x coordinate

var StartLeft=0; // Menu offset y coordinate

var VerCorrect=0; // Multiple frames y correction

var HorCorrect=0; // Multiple frames x correction

var LeftPaddng=10; // Left padding

var TopPaddng=6; // Top padding

var FirstLineHorizontal=1; // SET TO 1 FOR HORIZONTAL MENU, 0 FOR VERTICAL

var MenuFramesVertical=1; // Frames in cols or rows 1 or 0

var DissapearDelay=1000; // delay before menu folds in

var TakeOverBgColor=1; // Menu frame takes over background color subitem frame

var FirstLineFrame='navig'; // Frame where first level appears

var SecLineFrame='space'; // Frame where sub levels appear

var DocTargetFrame='space'; // Frame where target documents appear

var TargetLoc='menu4'; // span id for relative positioning

var HideTop=0; // Hide first level when loading new document 1 or 0

var MenuWrap=1; // enables/ disables menu wrap 1 or 0

var RightToLeft=0; // enables/ disables right to left unfold 1 or 0

var UnfoldsOnClick=0; // Level 1 unfolds onclick/ onmouseover

var WebMasterCheck=0; // menu tree checking on or off 1 or 0

var ShowArrow=0; // Uses arrow gifs when 1

var KeepHilite=1; // Keep selected path highligthed

var Arrws=['../images/arrow.gif',10,10,'../images/green2.gif',1,1,'../images/green2.gif',1,1]; // Arrow source, width and height



function BeforeStart(){return}

function AfterBuild(){return}

function BeforeFirstOpen(){return}

function AfterCloseAll(){return}





// Menu tree

// MenuX=new Array(Text to show, Link, background image (optional), number of sub elements, height, width);

// For rollover images set "Text to show" to: "rollover:Image1.jpg:Image2.jpg"



Menu1=new Array("rollover:../images/button_home1.jpg:../images/button_home2.jpg","../index.php","",0,33,110);


Menu2=new Array("rollover:../images/button_aboutus1.jpg:../images/button_aboutus2.jpg","..//aboutus.php","",3,33,120);

Menu2_1=new Array("Who We Are","../aboutus.php","",2,33,155);

Menu2_1_1=new Array("Meet The Board","../board.php","",0,33,155);

Menu2_1_2=new Array("Meet The Staff","../meetthestaff.php","",0,33,155);

Menu2_2=new Array("Photo Gallery","../photogallery.php","",0,33,155);

Menu2_3=new Array("Promo Video","../media.php","",0,33,155);


Menu3=new Array("rollover:../images/button_partners1.jpg:../images/button_partners2.jpg","..//partners.php","",12,33,110);

Menu3_1=new Array("About Partner Organizations","../partners.php","",0,33,250);

Menu3_2=new Array("Angela's Cafe","../angelascafe.php","",0,33,250);

Menu3_3=new Array("The Beiler Office","../beileroffice.php","",0,33,250);

Menu3_4=new Array("Cornerstone Pregnancy Care Services","../cornerstone.php","",0,33,250);

Menu3_5=new Array("The Early Learning Center of Gap","../earlylearningcenter.php","",0,33,250);

Menu3_6=new Array("Family Resource & Counseling Centers","../frcc.php","",0,33,250);

Menu3_7=new Array("Gap Community Church","../gcc.php","",0,33,250);

Menu3_8=new Array("Harrisburg Area Community College","../hacc.php","",0,33,250);

Menu3_9=new Array("Jars of Hope","../jarsofhope.php","",0,33,250);

Menu3_10=new Array("Salisbury Township Branch Library","../library.php","",0,33,250);

Menu3_11=new Array("Salus Solutions","../lcc.php","",0,33,250);

Menu3_12=new Array("Tree of Life Health Ministries","../treeoflife.php","",0,33,250);



Menu4=new Array("rollover:../images/button_meetings1.jpg:../images/button_meetings2.jpg","../availablespaces.php","",1,33,155);

Menu4_1=new Array("Available Spaces","../availablespaces.php","",0,33,165);


Menu5=new Array("rollover:../images/button_services1.jpg:../images/button_services2.jpg","../services.php","",2,33,100);

Menu5_1=new Array("About Services","../services.php","",0,33,155);

Menu5_2=new Array("Fitness","../fitness.php","",0,33,155);


Menu6=new Array("rollover:../images/button_getinvolved1.jpg:../images/button_getinvolved2.jpg","../volunteer.php","",2,33,125);

Menu6_1=new Array("Volunteer Opportunities","../volunteer.php","",0,33,185);

Menu6_2=new Array("Donations & Contributions","../donations.php","",0,33,185);


Menu7=new Array("rollover:../images/button_newsevents1.jpg:../images/button_newsevents2.jpg","../calendar.php","",4,33,110);

Menu7_1=new Array("Calendar of Events","../calendar.php","",0,33,155);

Menu7_2=new Array("Yard Sale","../yardsale.php","",0,33,155);

Menu7_3=new Array("FallFest","../fallfest.php","",0,35,155);

Menu7_4=new Array("Trunk or Treat","../trunkortreat.php","",0,35,155);


Menu8=new Array("rollover:../images/button_contact1.jpg:../images/button_contact2.jpg","../contactus.php","",1,33,110);

Menu8_1=new Array("Directions","../contactus.php","",0,33,110);



I don't know what to add to make the font & size of the menu and submenu items different...

The website is gapfamilycenter.org

Any help would be greatly appreciated!