)ul {
   width: 7em;}
li {
        position: relative;}
li a {
        display: block;
        width: 6.5em;}
nav > ul a {
        width: auto;}

ul ul {
        position: absolute;
        top: 0;
        left: 7em;
        display:none;}
li:hover ul {
   display : block;}

<article>
                <header>
                        <hgroup>
                                <h1></h1>
                                <h2></h2>
                        </hgroup>
                </header>
                <p title="Strophe1" id="st"></p>
                <p class="refrain"></p>
                <p title="Strophe4" id="str"></p>
                <p class="refrain" id="ref4"></p>
                <footer> date (1880 - 1918) </footer>
</article>

Que selectionne les expressions suivantes.

1.  p + p + p
2. p ~ p + p
3.  p[2]
4.  p:nth-of-type(-n+2)
5.  p:nth-child(2)

entête logo ...