Navigation bar with drop down menus

[Total: 0    Average: 0/5]

When you mouse over the titles in the grey bar, menus with links drop down for you to click on.

Head Code:

<script language="Javascript">

function visible(id)
{
id.style.visibility="visible";
}

function hidden(id)
{
id.style.visibility="hidden";
}

</script>

<style type=text/css>
.navbar
{
position:absolute;
top:0;
left:0;
height:20;
width:100;
background-color:buttonface;
font: 11px helvetica;
padding: 3px;
}

.dropmenu
{
position:absolute;
top:0;
left:100;
width:100;
background-color:#cccccc;
visibility:hidden;
z-index:2;
}

a.a
{
font: 11px helvetica;
width:100;
height:20;
color:#000000;
text-decoration:none;
padding: 3px;
}

a.a:hover
{
background-color:highlight;
color:#ffffff;
}
</style>

Body Code:

<div style="position:absolute; top:0; left:13">
<div style="position:absolute; top:0; left:0">
<div class="navbar" 
onmouseover="visible(dropmenu1)"
onmouseout="hidden(dropmenu1)">
File
</div>
<div 
class="dropmenu" id="dropmenu1"
onmouseover="visible(dropmenu1)"
onmouseout="hidden(dropmenu1)">
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
<div><a href="link.html" class="a">a link</div></a>
</div>
</div>
<div style="position:absolute; top:0; left:100">
<div class="navbar"
onmouseover="visible(dropmenu2)"
onmouseout="hidden(dropmenu2)">
File
</div>
<div class="dropmenu" id="dropmenu2" 
onmouseover="visible(dropmenu2)"
onmouseout="hidden(dropmenu2)">
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
<div><a href="#" class="a">a link</div></a>
</div>
</div>
</div> 

<h1>Here's some writing</h1> 

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *