Принесите стили фокуса к элементу p с помощью tabindex, примененного к span внутри li

Я хочу применить стили, которые находятся на ли, к элементу p, когда фокус tabindex применяется к тегам span внутри li.

Любая идея о том, как это сделать?

Здесь скрипка с попытками. http://jsfiddle.net/fauverism/dK3kV/

<ul id="nav">
<li id="home" tabindex="2" style=""><span>Home</span></li>
<li id="about" tabindex="3"><span>About</span></li>
<li id="portfolio" tabindex="4"><span>Portfolio</span></li>
<li id="contact">
    <span id="phone" tabindex="7"></span>
    <span id="email" tabindex="8"></span>
    <span id="fax" tabindex="9"></span>
    <p>Contact</p>
</li>

#nav {
    background: #ccc;
    border: 1px solid #f5f5f5;
    margin: 0;
    width: 300px;    
}
li {
    color: gray;
    display: block;
    list-style-type: none;
}
li:focus {
    background: yellow;
    color: blue;
}
/* Attempts below */
li:focus p {
    background: blue;
    color: yellow;   
}
li:focus > p {
    background: blue;
    color: yellow;   
}

PS Я бы предпочел не использовать javascript, и я не могу поместить tabindex в #contact.