CSS basics - HTML5 and CSS3 - page 479

This snippet of markup might be part of a content management system.
The idea is that the buttons allow the user to enable edit mode or delete
the element:
<article>
<header>
<h1>Article</h1>
<menu>
<button>Edit</button><button>Delete</button>
</menu>
</header>
</article>
Most of the time, the menu needs to
be hidden so the user can see the end
result more clearly. The menu is there-
fore hidden with this CSS :
header menu {
display: none;
}
You'll learn more about the display
property in the next section.
With the menu hidden, there's no
point adding the hover pseudo-class to
that—the mouse pointer will never be
able to hover over an element that
isn't there. But the <header> element is
visible, so here's a rule that makes the
<menu> element visible when the mouse
pointer is hovering over the <header>
element:
header:hover menu {
display: inline;
}