HTML and CSS Reference
In-Depth Information
EXAMPLE
14.33 (
CONTINUED
)
6
#menu3 { position:absolute;
text-decoration:underline;
top:40px;
left:6.2cm;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:pink;
width:80px;
color: black;
font-size: 12pt;
visibility:hidden;
}
7
/* End of style sheet */
EXAMPLE
14.34
<html>
<head><title>Drop-Down Menu</title>
<link rel="stylesheet" href="dropdown.css"type="text/css"/>
<script type="text/javascript">
8
function showMenu(id){
9
var ref = document.getElementById(id);
10
ref.style.visibility = "visible";
// Make the drop-down
// menu visible
}
11
function hideMenu(id){
12
var ref = document.getElementById(id);
13
ref.style.visibility = "hidden";
//Hide the drop-down menu
}
</script>
</head>
<body bgColor="lightblue">
14
<table width="350" border="2" bgcolor="lightgreen"
cellspacing="1" cellpadding="2">
<tr>
15
<td width="100">
16
<div id="menu" onClick="hideMenu('menu');">
<a class="menu" href="#">US</a><br />
<a class="menu" href="#">World</a><br />
<a class="menu" href="#">Local </a><br />
</div>
17
<a href="#" onMouseOver="showMenu('menu');">News</a>
</td>
Continues
