<style type="text/css"> 
<!-- 
body{ 
 	background-color: #ffe4c4 
 } 
 A{ 
 	color: Blue; 
 	text-decoration:none 
 } 
 A:hover{color:red} 
 A:visited:{color:#808080} 
 TD{ 
 	font-family: Arial, Helvetica, sans-serif; 
 	font-size:10pt 
 } 
 
--> 
</style> 
 
<style type="text/css"> 
<!-- 
A:hover{color:red} 
 #divBg{position:absolute; top:0; left:0; visibility:hidden; height:50} 
 DIV.clSub{ 
 	position:relative; 
 	top:-5; 
 	font-family: Arial, Helvetica, sans-serif; 
 	font-size:12px; 
 	padding:10px; 
 	visibility:hidden; 
 	background-color:Silver; 
 	layer-background-color:Silver 
 } 
 
--> 
</style> 
<script language="JavaScript1.2"> 
<!--//BEGIN Script  
/******************************************************************************** 
Copyright (C) 1999 Thomas Brattli 
This script is made by and copyrighted to Thomas Brattli at www.bratta.com 
Visit for more great scripts. 
This may be used freely as long as this msg is intact! 
******************************************************************************** 
Browsercheck:*/ 
ie=document.all?1:0 
n=document.layers?1:0 
 
//Do you want it to move with the page if the user scroll the page?  
var moveOnScroll=true 
 
//Do you want to hide all the other submenus when you click a new?  
var hideAll=true 
 
/******************************************************************************** 
If you want to change the appearans on the text, or background or anything 
do that in the style tag above, or in the table tag below. 
 
NOTE: This menu have some "small" bugs. 
In Netscape the links in the submenus will work even though the 
submenus are hidden, this has something to do with 
a lousy implementation of the relative positioning in Netscape. 
In IE links "underneath" the submenus will not work even though the 
submenus are hidden. 
I will look into this and might find a fix for it. 
********************************************************************************/ 
 
 
/******************************************************************************** 
Object constructor 
********************************************************************************/ 
function makeMenuBar(obj,nest,vis){ 
    nest=(!nest) ? '':'document.'+nest+'.' 
    this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') 
        this.hideIt=b_hideIt;   this.showIt=b_showIt; this.vis=b_vis                                             
        if(ie && vis) this.css.visibility='hidden' 
        this.state=1 
        this.go=0 
        this.height=n?this.css.document.height:eval(obj+'.offsetHeight') 
        this.top=b_gettop 
    this.obj = obj + "Object";  eval(this.obj + "=this")         
} 
//Get's the top position.  
function b_gettop(){ 
        var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop); 
        return gleft; 
} 
//The functions for showing and hiding  
function b_showIt(){ 
        this.css.visibility="visible" 
} 
function b_hideIt(){ 
        this.css.visibility="hidden" 
} 
function b_vis(){ 
        if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true; 
} 
/******************************************************************************** 
Checking if the page is scrolled, if it is move the menu after 
********************************************************************************/ 
function checkScrolled(){ 
        if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled) 
        if(n) setTimeout('checkScrolled()',30) 
} 
/******************************************************************************** 
Inits the page, makes the menu object, moves it to the right place,  
show it.. 
********************************************************************************/ 
function menuBarInit(){ 
        oSub=new Array() 
        //Change it here if you want more or less submenus.  
        oSub[0]=new makeMenuBar('divSub0','divBg',1) 
        oSub[1]=new makeMenuBar('divSub1','divBg',1) 
        oSub[2]=new makeMenuBar('divSub2','divBg',1) 
        oSub[3]=new makeMenuBar('divSub3','divBg',1) 
        oSub[4]=new makeMenuBar('divSub4','divBg',1) 
        //Moving menuBar  
        oMenu=new makeMenuBar('divBg') 
        scrolled=n?"window.pageYOffset":"document.body.scrollTop" 
        oMenu.css.top=eval(scrolled) 
        oMenu.css.visibility='visible' 
        if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); 
} 
 
/******************************************************************************** 
Shows and hides the submenus 
********************************************************************************/ 
function extract(num){ 
        if(hideAll){ 
                for(i=0;i<oSub.length;i++){ 
                        if(num!=i) oSub[i].hideIt() 
                } 
        } 
        !oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt(); 
 
} 
 
onload=menuBarInit; 
//-->  
</script>  
</head> 
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000"><div id="divBg"> 
<table width="100%" border="0" cellspacing="0" cellpadding="5" align="CENTER" valign="MIDDLE"> 
        <tr bgcolor="#C0C0C0"> 
                <td height="30"><a href="#" onclick="extract(0); return false">Navigation Links</a></td> 
                <td><a href="#" onclick="extract(1); return false">Choice 2</a></td> 
                <td><a href="#" onclick="extract(2); return false">Choice 3</a></td> 
                <td><a href="#" onclick="extract(3); return false">Choice 4</a></td> 
                <td><a href="#" onclick="extract(4); return false">Choice 5</a></td> 
        </tr> 
        <!-- If you don't want submenu, just remove this tr and  
        remove the onclicks above and change the #'s to links --> 
        <tr> 
                <td valign="TOP"> 
                <div id="divSub0" class="clSub"> 
                        <!-- To make the links link somewhere, just replace the #'s 
                        with the link location --> 
                        <a href="http://www.masterasap.com">Home Page</a><br> 
                        <a href="http://www.masterasap.com/what.htm">Contents</a><br> 
                        <a href="http://www.masterasap.com/sysreq.htm">Previous Page</a><br> 
                        <a href="http://www.shop4all.com">Next Page</a><br> 
                </div> 
                </td> 
                <td valign="TOP"> 
                <div id="divSub1" class="clSub"> 
                        <a href="#">Sub choice 1</a>     <br> 
                        <a href="#">Sub choice 2</a><br> 
                        <a href="#">Sub choice 3</a> 
                </div> 
                </td> 
                <td valign="TOP"> 
                <div id="divSub2" class="clSub"> 
                        <a href="#">Sub choice 1</a>     <br> 
                        <a href="#">Sub choice 2</a> 
                </div> 
                </td> 
                <td valign="TOP"> 
                <div id="divSub3" class="clSub"> 
                        <a href="#">Sub choice 1</a>     <br> 
                        <a href="#">Sub choice 2</a><br> 
                        <a href="#">Sub choice 3</a><br> 
                        <a href="#">Sub choice 4</a><br> 
                        <a href="#">Sub choice 5</a> 
                </div> 
                </td> 
                <td valign="TOP"> 
                <div id="divSub4" class="clSub"> 
                        <a href="#">Sub choice 1</a>     <br> 
                        <a href="#">Sub choice 2</a><br> 
                        <a href="#">Sub choice 3</a><br> 
                        <a href="#">Sub choice 4</a> 
                </div> 
                </td> 
        </tr> 
</table> 
</div><br><br><img src="four.gif" width=16 height=20 border=0 align="right" alt="NS 4.x or IE 4.x only"> 
<div align="center"><h1>Scrolling Menu Bar</h1></div> 
<p>Here's a script that supplies a dropdown menu bar that remains at the top of the screen even if you scroll the page. For the purposes of demonstration, only the links under 'Navigation Links'  work. Browsers other than version 4 and better should show the bar with all the links fully expanded, and it will not scroll down with the page, of course.</p> 
<p>I've added a couple of graphics to this page solely to fill up the page and make it scroll.</p> 
<table align="center" cellspacing="2" cellpadding="2" border="5"> 
<tr> 
    <td><img src="girl.jpg" width=480 height=320 border=0 alt="A girl with her doll"></td> 
</tr> 
</table><br> 
<table align="center" cellspacing="2" cellpadding="2" border="5"> 
<tr> 
    <td><img src="motorboat.jpg" width=574 height=170 border=0 alt="A motorboat"></td> 
</tr> 
</table><hr> 