HTML and CSS Reference
In-Depth Information
Figure 13-42
221b blog web page
Kyle already has created the style sheet for the menus and the HTML code for the
Web page. Your job will be to write the JavaScript code to control the operation of the
pull-down menus on the page.
Complete the following:
1. Using your text editor, open the
holmestxt.htm
,
pulltxt.css
, and
pulltxt.js
files from
the tutorial.13\case3 folder, enter
your name
and
the date
in the comment section
of each file, and then save the files as
holmes.htm
,
pullmenu.css
, and
pullmenu.js
,
respectively.
2. Take some time to view the contents of the
holmes.htm
file in your text editor, noting
the structure of the two navigation lists and the submenus within each of those lists.
3. Open the
holmes.htm
file in your Web browser, and then study the placement of the
six pull-down menus for the stories and novels of Sherlock Holmes. The page also
contains four pull-down menus in the vertical navigation bar containing links to Web
sites for
User Submissions
,
Holmes on the Web
,
Arthur Conan Doyle
, and
Other
Fictional Detectives
, but these are obscured by the horizontal pull-down menus at
the moment.
4. Go to the
pullmenu.css
file in your text editor. At the bottom of the file, insert the
following two style rules: i) hide the
ul
elements nested within the
li
elements
belonging to the
submenu
class by setting their
display
property to
none
; and ii)
display a pointer cursor for
h1
elements belonging to the
submenuHead
class.
