.arrow {float:right; cursor:pointer;}/*this controls the positioning of the fly-out indicator arrows*/ /*NOTE: While you may be able to just insert the navbar code directly into the div where you want by using position:relative; top:0px; left:0px;, it may occur that certain div tags below the nav bar will cover up the drop-downs. Or that inserting the navbar into another div will result in A LINK DEFINITIONS being over-ridden by the parent div's A LINK DEFINITIONS. In those cases, use position:absolute and specify top and left values to position it properly. Using z-index:1000; should suffice, but you can adjust it if needed.*/ .NavBar {position:relative; top:0px; left:0px; z-index:1000; border:0px; padding:0px 0px 0px 5px; /*background:#316;*/} .NavBar {/*DIV HEIGHT: LINK PADDING + A HEIGHT(+ BORDER) = DIV HEIGHT*/ margin:0px; height:35px; width:921px;} .NavBar, .NavBar ul li table {font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; text-align:left;} .NavBar img {vertical-align:top;} .NavBar ul {padding:0px; margin:0px; line-height:1.5em; list-style-type:none;} .NavBar li {padding:0px; margin:0px; float:left; position:relative;} .NavBar ul li table {padding:0px; margin:0px; border-collapse:collapse;} .NavBar ul li ul {padding:0px; margin:0px; display:none;} /*TOP LINKS---------------------------------------------------------------------------------------------------------------------------------------------*/ /*NOTE: The xxON and ON classes are used to define the look of the CURRENT LINK*/ .NavBar ul li a, .NavBar ul li.ON a {display:block; float:left; text-decoration:none; font-size:16px; text-align:center; /* border-bottom:1px solid #000; border-right:1px solid #333; border-top:1px solid #ccc; border-left:1px solid #999; border:1px solid #000;*/ /*LINK PADDING is used to center text links vertically in their cell. If main nav buttons use graphics only and no text, you can comment it out.*/ /*Remember to account for it if you use it. LINK PADDING + A HEIGHT(+ BORDER) = DIV HEIGHT*/ height:35px; /*padding-top:5px;width:98px;*/} /*TOP LINK NORMAL AND CURRENT STATES - WIDTH, LINK BACKGROUNDS (and BORDERS), and LINK TEXT COLOR for both the normal and current states*/ /*.NavBar ul li a {width:98px; border:1px solid #000; background:#688; color:#cfc;}TOP LINK NORMAL COLOR*/ /*.NavBar ul li.ON a {width:98px; border:1px solid #000; background:#9bb; color:#f00;}COLOR does nothing here.*/ /*OR - Use the section below to control specifics - comment out the section you don't use.*/ /*NOTE: If you want SPECIFIC link definitions to use a SINGLE LINK COLOR, uncomment just the COLOR definitions above and comment out all of the COLOR definitions below in this section. In this case, you may want to utilize the VISITED LINK COLORS as well.*/ .NavBar ul li.l1 a {width: 86px; background: no-repeat url(images/Nav/Buttons.png) 0px 0px;}/*color:#fff;*/ .NavBar ul li.l1ON a {width: 86px; background: no-repeat url(images/Nav/Buttons.png) 0px -100px;}/*color:#000;*/ .NavBar ul li.l2 a {width:178px; background: no-repeat url(images/Nav/Buttons.png) -86px 0px;} .NavBar ul li.l2ON a {width:178px; background: no-repeat url(images/Nav/Buttons.png) -86px -100px;} .NavBar ul li.l3 a {width:137px; background: no-repeat url(images/Nav/Buttons.png) -264px 0px;} .NavBar ul li.l3ON a {width:137px; background: no-repeat url(images/Nav/Buttons.png) -264px -100px;} .NavBar ul li.l4 a {width:125px; background: no-repeat url(images/Nav/Buttons.png) -401px 0px;} .NavBar ul li.l4ON a {width:125px; background: no-repeat url(images/Nav/Buttons.png) -401px -100px;} .NavBar ul li.l5 a {width: 65px; background: no-repeat url(images/Nav/Buttons.png) -526px 0px;} .NavBar ul li.l5ON a {width: 65px; background: no-repeat url(images/Nav/Buttons.png) -526px -100px;} .NavBar ul li.l6 a {width:222px; background: no-repeat url(images/Nav/Buttons.png) -591px 0px;} .NavBar ul li.l6ON a {width:222px; background: no-repeat url(images/Nav/Buttons.png) -591px -100px;} .NavBar ul li.l7 a {width:108px; background: no-repeat url(images/Nav/Buttons.png) -813px 0px;} .NavBar ul li.l7ON a {width:108px; background: no-repeat url(images/Nav/Buttons.png) -813px -100px;} /*TOP LINK VISITED STATE DEFINITIONS for NORMAL and CURRENT LINKS for TOP LINKS ONLY - you can comment out the color definitions if you wont use them.*/ /*VISITED states for NORMAL and CURRENT LINKS for TOP LINKS ONLY - comment out the color definitions if you wont use them.*/ /*If you do use them, consider using the same value for the VISITED CURRENT LINK as was used for the CURRENT LINK.*/ /*Also note that using them will override any SPECIFIC LINK TEXT COLORS defined above when the link has been visited.*/ .NavBar ul li a:visited {/**/text-decoration:none; height:35px; /*color:#0f0;VISITED NORMAL LINK*/} .NavBar ul li.ON a:visited {/**/text-decoration:none; height:35px; /*color:#009;VISITED CURRENT LINK*/} /*TOP LINK HOVER STATE DEFINITIONS here using the same values for both the off and the on hover states*/ /*Comment these out if you plan to use a single definition for all top links and uncomment the last two lines of this section*/ .NavBar ul li:hover.l1 a, .NavBar ul li.l1 a:hover, .NavBar ul li:hover.l1ON a, .NavBar ul li.l1ON a:hover {background: no-repeat url(images/Nav/Buttons.png) 0px -50px;} .NavBar ul li:hover.l2 a, .NavBar ul li.l2 a:hover, .NavBar ul li:hover.l2ON a, .NavBar ul li.l2ON a:hover {background: no-repeat url(images/Nav/Buttons.png) -86px -50px;} .NavBar ul li:hover.l3 a, .NavBar ul li.l3 a:hover, .NavBar ul li:hover.l3ON a, .NavBar ul li.l3ON a:hover {background: no-repeat url(images/Nav/Buttons.png) -264px -50px;} .NavBar ul li:hover.l4 a, .NavBar ul li.l4 a:hover, .NavBar ul li:hover.l4ON a, .NavBar ul li.l4ON a:hover {background: no-repeat url(images/Nav/Buttons.png) -401px -50px;} .NavBar ul li:hover.l5 a, .NavBar ul li.l5 a:hover, .NavBar ul li:hover.l5ON a, .NavBar ul li.l5ON a:hover {background: no-repeat url(images/Nav/Buttons.png) -526px -50px;} .NavBar ul li:hover.l6 a, .NavBar ul li.l6 a:hover, .NavBar ul li:hover.l6ON a, .NavBar ul li.l6ON a:hover {background: no-repeat url(images/Nav/Buttons.png) -591px -50px;} .NavBar ul li:hover.l7 a, .NavBar ul li.l7 a:hover, .NavBar ul li:hover.l7ON a, .NavBar ul li.l7ON a:hover {background: no-repeat url(images/Nav/Buttons.png) -813px -50px;} /*Set a single HOVER definition for all top links here - comment these out if you are using the above SPECIFIC DEFINITIONS for all top links .NavBar ul li:hover a, .NavBar ul li a:hover, .NavBar ul li:hover.ON a, .NavBar ul li.ON a:hover {background: no-repeat url(../Images/Nav/Buttons.png) 0px -100px;}*/ /*Other required HOVER state definitions*/ .NavBar ul li:hover a, .NavBar ul li a:hover, .NavBar ul li:hover.ON a, .NavBar ul li.ON a:hover {border:0px/*Required for ie6*/; height:44px/*This is the HOTZONE - typically equal to A HEIGHT*/; color:#000/*TOP LINK HOVER COLOR*/; text-decoration:none;} /*DROP-DOWNS--------------------------------------------------------------------------------------------------------------------------------------------*/ /*DROP DOWN UL CONTAINER DEFINITIONS*/ .NavBar ul li:hover ul, .NavBar ul li a:hover ul {display:block; margin:0px; padding:1px/*gives the drop downs a 1 px border*/; background:#000; color:#000; position:absolute; left:0px; top:44px/*distance from top of navbar*/; height:auto; width:auto;} /*DROP DOWN LINK DEFINITIONS*/ .NavBar ul li:hover.ON ul li a, .NavBar ul li:hover ul li a, .NavBar ul li.ON a:hover ul li a, .NavBar ul li a:hover ul li a {border:0px; margin:0px; padding:0px; text-align:left; font-size:10px; height:20px;/*drop-down link height*/ overflow:hidden/*hides too much textr*/;} /*Use this section to set SPECIFIC DROPDOWN WIDTHS and DROPDOWN LINK BACKGROUND IMAGES. HOVER states are in the next section.*/ /*To account for a 1 px border, WIDTH value should be LINK WIDTH - 2 and include a 1px left offset for the image position. .NavBar ul li:hover.l1 ul li a, .NavBar ul li.l1 a:hover ul li a, .NavBar ul li:hover.l1ON ul li a, .NavBar ul li.l1ON a:hover ul li a {width: 98px; background:no-repeat url(../Images/Nav/Buttons.png) -1px 0px;} .NavBar ul li:hover.l2 ul li a, .NavBar ul li.l2 a:hover ul li a, .NavBar ul li:hover.l2ON ul li a, .NavBar ul li.l2ON a:hover ul li a {width: 98px; background:no-repeat url(../Images/Nav/Buttons.png) -101px 0px;}*/ /*OR Use this to set a single definition for all drop-down links.*/ .NavBar ul li:hover.l1 ul li a, .NavBar ul li.l1 a:hover ul li a, .NavBar ul li:hover.l2 ul li a, .NavBar ul li.l2 a:hover ul li a, .NavBar ul li:hover.l3 ul li a, .NavBar ul li.l3 a:hover ul li a, .NavBar ul li:hover.l4 ul li a, .NavBar ul li.l4 a:hover ul li a, .NavBar ul li:hover.l5 ul li a, .NavBar ul li.l5 a:hover ul li a, .NavBar ul li:hover.l6 ul li a, .NavBar ul li.l6 a:hover ul li a, .NavBar ul li:hover.l7 ul li a, .NavBar ul li.l7 a:hover ul li a, .NavBar ul li:hover ul li a, .NavBar ul li a:hover ul li a, .NavBar ul li:hover.ON ul li a, .NavBar ul li.ON a:hover ul li a {width:135px; background:repeat-x url(images/Nav/Buttons.png) 0px -150px;} /*This value sets the DROPDOWN TEXT LINK COLOR*/ .NavBar ul li:hover ul li a, .NavBar ul li a:hover ul li a, .NavBar ul li:hover.ON ul li a, .NavBar ul li.ON a:hover ul li a {color:#eee;} /*Use this section to set the HOVER states for SPECIFIC DROPDOWN LINK BACKGROUND IMAGES.*/ /*To account for a 1 px border, include a 1px left offset for the image position. .NavBar ul li:hover.l1 ul li a:hover, .NavBar ul li.l1 a:hover ul li a:hover, .NavBar ul li:hover.l1ON ul li a:hover, .NavBar ul li.l1ON a:hover ul li a:hover {background:no-repeat url(../Images/Nav/Buttons.png) -1px -100px;} .NavBar ul li:hover.l2 ul li a:hover, .NavBar ul li.l2 a:hover ul li a:hover, .NavBar ul li:hover.l2ON ul li a:hover, .NavBar ul li.l2ON a:hover ul li a:hover {background:no-repeat url(../Images/Nav/Buttons.png) -101px -100px;}*/ /*OR Use this to set a single definition for all drop-down links.*/ .NavBar ul li:hover ul li a:hover, .NavBar ul li a:hover ul li a:hover, .NavBar ul li:hover.ON ul li a:hover, .NavBar ul li.ON a:hover ul li a:hover {background:repeat-x url(images/Nav/Buttons.png) 0px -180px;} /*This value sets the DROPDOWN TEXT HOVER COLOR*/ .NavBar ul li:hover ul li a:hover, .NavBar ul li a:hover ul li a:hover, .NavBar ul li:hover.ON ul li a:hover, .NavBar ul li.ON a:hover ul li a:hover {color:#333;} /*FLY-OUTS----------------------------------------------------------------------------------------------------------------------------------------------*/ /*FLY-OUT MENU*/ .NavBar ul li:hover ul li ul, .NavBar ul li a:hover ul li a ul {visibility:hidden; position:absolute; top:-1px/*to account for 1 px border*/; width:auto; /*The following LEFT attribute sets the DEFAULT FLY-OUT POSITION. This should equal the DEFAULT DROP-DOWN WIDTH value.*/ /*Comment this attribute out if you prefer to set SPECIFIC FLY-OUT POSITIONS(below)*/ left:135px;} /*Use the following section to set SPECIFIC FLY-OUT POSITIONS. They should equal the SPECIFIC DROP-DOWN WIDTH values.*/ /*Comment this section out if you prefer to set a DEFAULT FLY-OUT POSITION (above)*/ /*NOTE: Negative values here will provide a reverse offset. .NavBar ul li:hover.l1 ul li ul, .NavBar ul li.l1 a:hover ul li a ul, .NavBar ul li:hover.l1ON ul li ul, .NavBar ul li.l1ON a:hover ul li a ul {left: 98px;} .NavBar ul li:hover.l2 ul li ul, .NavBar ul li.l2 a:hover ul li a ul, .NavBar ul li:hover.l2ON ul li ul, .NavBar ul li.l2ON a:hover ul li a ul {left: 98px;}*/ /*Other FLY-OUT attributes*/ .NavBar ul li:hover ul li:hover ul, .NavBar ul li a:hover ul li a:hover ul {visibility:visible;} /*This section sets the FLY-OUT WIDTH, BACKGROUND and FONT COLORS, and BACKGROUND and FONT HOVER COLORS.*/ /*If you comment the rest out, fly-outs will take on drop-down attributes. HOWEVER, be aware that skinny DROP-DOWNS will produce skinny FLY-OUTS and if your link text is too long, you'll get undesireable results.*/ .NavBar ul li:hover ul li:hover ul li a, .NavBar ul li a:hover ul li a:hover ul li a, .NavBar ul li:hover ul li:hover ul li a:hover, .NavBar ul li a:hover ul li a:hover ul li a:hover /*DEFAULT FLY-OUT WIDTH {width:148px;}*/ .NavBar ul li:hover ul li:hover ul li a, .NavBar ul li a:hover ul li a:hover ul li a /*FLY-OUT BACKGROUND and LINK COLORS {background:#ccf; color:#33f;}*/ .NavBar ul li:hover ul li:hover ul li a:hover, .NavBar ul li a:hover ul li a:hover ul li a:hover /*FLY-OUT BACKGROUND and LINK HOVER COLORS {background:#33f; color:#ccf;}*/