HTML and CSS Reference
In-Depth Information
article {
position: relative;
[...]
margin-left: 50px;
border: 1px solid black;
}
article time {
position: absolute;
top: 10px;
left: -50px;
[...]
background: url(images/flag.png) no-repeat right top;
}
[...]
<article>
<time>13th</time>
</article>
Tooltips, drop-down menus, and overlays can be coded in a similar fash-
ion as the example shown earlier in Figure 7.6. The difference with these
types of elements is that they typically start as hidden and then through
interaction change presentation.
Chapter 14 of
The JavaScript Pocket Guide
by Lenny Burdette (Peachpit,
2010) covers drop-down navigation in depth and includes the following
code, which changes the state of the positioned submenu list.