HTML and CSS Reference
In-Depth Information
EXAMPLE
14.34 (
CONTINUED
)
<td width="100">
<div id="menu2" onClick="hideMenu('menu2');">
<a class="menu" href="#">Basketball</a><br />
<a class="menu" href="#">Football</a><br />
<a class="menu" href="#>">Soccer</a><br />
</div>
18
<a href="#" onMouseOver="showMenu('menu2');">Sports</a>
</td>
<td width="100">
<div id="menu3" onClick="hideMenu('menu3');">
<a class="menu"
href="http://www.imdb.com/">Movies</a><br />
<a class="menu" href="#">Plays</a><br />
<a class="menu" href="#>">DVD's</a><br />
</div>
19
<a href="#"
onMouseOver="showMenu('menu3');">Entertainment</a>
</td>
20 </tr>
</table>
</body>
</html>
EXPLANATION
1
The
a
selector is followed by the style definition for the links that appear in the
main menu.
2
An ID selector and a class are defined. This style will be used on links in the drop-
down menus.
3
This ID selector defines the style of the first drop-down menu. When the user
clicks the News link, this yellow drop-down menu will appear directly under the
table cell containing the News link.
4
Initially, the first drop-down menu is
hidden
from view.
5
This ID selector defines the style of the second drop-down menu. It will be orange
and drop down directly under the Sports link.
6
This ID selector defines the style of the third drop-down menu. It will be pink and
drop down directly under the Entertainment link.
7
The CSS ends here, and the JavaScript program begins on the next line.
8
A function called
showMenu
is defined. Its only parameter is the
id
attribute of a
div
object, that is, the ID of one of the three drop-down menus.
