Introduction to CSS (Cascading Style Sheets) with JavaScript - JavaScript by Example - page 602

The visibility Property. The visibility property lets you hide an object and then bring
it back into view. You can also use the visibility property to determine the state: Is it “vis-
ible” or “hidden”? This property is useful when creating interfaces such as drop-down
menus, slideshows, and popups or tooltips. 4 In Example 14.34, when the user clicks on
one of the links in the main menu, a drop-down menu will appear. If the user rolls the
mouse over the drop-down menu, it will be hidden from view. Each of the drop-down
menus is defined within a <div> container.

EXAMPLE 14.33

/* this style sheet is in a file called dropdown.css */

1 a { font-family: verdana, arial;

text-decoration: none;
font-weight: bold;
margin-left: 4px; } /*link style for main menu*/
.linkstyle { color: #f33;}

2 #menu, .menu { font-stye: verdana;

font-size:10pt;
color:black; }
/* link style for drop-down menu */

3 #menu { position:absolute;

text-decoration:underline;
top:40px;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:yellow;
width:75px;
color: black;
font-size: 12pt;

4 visibility:hidden; }

5 #menu2 { position:absolute;

text-decoration:underline;
top:40px;
left:3.2cm;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:orange;
width:80px;
color: black;
font-size: 12pt;
visibility:hidden;

}

4. The visibility property applies to an entire object. The clip property allows you to designate how much of
an element will be visible.