HTML and CSS Reference
In-Depth Information
EXPLANATION
(
CONTINUED
)
9
The
getElementById()
method returns a reference to the
div
object that contains
the drop-down menu.
10
The
visibility
property is set to
visible
. The drop-down object comes into view,
right below the main menu item where the user clicked the link.
11
A function called
hideMenu()
is defined. Its only parameter is the
id
attribute of a
div
object. When this function is invoked, the drop-down menu being referenced
will be
hidden
from view.
12
The
getElementById()
method returns a reference to the
div
object that contains
the drop-down menu.
13
The
visibility
property is set to
hidden
. The object being referenced disappears
from view.
14
An HTML table is defined. It will be light green, 350 pixels wide, and contain one
row and three data cells.
15
The first cell of the table contains a
<div>
container that is positioned and styled
by the CSS
#menu
ID selector. If the user clicks from within this tag, it will be hid-
den from view. If he or she clicks a link in the drop-down menu, the user will be
directed to a Web site.
16
The links within the
<div>
container are described by the CSS .
menu
class. The
links are deactivated for this example.
17
When the user rolls the mouse onto this link called News, the
onMouseOver
event
will be triggered. A function called
showMenu
will be invoked, causing the drop-
down menu to appear.
18
The second drop-down menu is created and will be made visible when the user
rolls the mouse over the Sports link.
19
Like the other two links, the Entertainment link also has a drop-down menu as-
sociated with it, which will be made visible when the user rolls the mouse over it,
and made invisible when the user clicks on the drop-down list.
20
The table row and table are closed. See Figure 14.39.