HTML and CSS Reference
In-Depth Information
23
.menu ul li
{display: block; font-size: small;
padding: 0.2em;}
24
25
div.menu:hover ul{margin: 0; padding: 0; display: block;
26
background-color: white; color: #303032;}
27
28
div.menu ul li:hover {background-color: #cccccc;}
CSS Pseudoclasses
To expand the possibilities
of CSS, you can use
pseudoclasses (e.g.,
the link hover). When
used effectively, CSS
pseudoclasses are used
to add special effects to
some selectors.
Figure 7-5b shows the navigation bar with the inserted code above. Figure 7-6a
shows the navigation bar when the pointer is on the Water Expeditions option. This is
defined with the style statements on lines 20 and 21 in the CSS code. Figure 7-6b shows
the navigation bar when a Web site visitor hovers over the Whale Watching list item in
the Water Expeditions list. This style is defined on lines 25 through 28 where the hover
pseudoclass is used.
(a)
when user hovers over navigation
bar; no pointing finger because
there is no link at this level
when user hovers over a link option on
submenu; background color changes;
pointing finger to indicate link
(b)
Figure 7-6
The CSS code in the embedded style sheet contains some properties you are
familiar with from previous chapters and some that are new. Line 20 in the CSS code sets
a style for the unordered lists (ul) in the menu class. It starts by setting display to none.
When the Web page loads (i.e., before the user hovers over the menu), the unordered
lists will not display (Figure 7-5b on the previous page). The position property is used
to position an element on the Web page. If you do not use the position property, the
elements display on the Web page in the order in which they appear. For example, if you
have a line of text entered in your HTML code, and then you insert an image in the code,
the text appears on the Web page before the image. The position: absolute property in
line 20 sets the style so that the menu text remains constant and does not move. Table 7-5
on the next page lists the available property values for position.
