Making navigation behave same way with mouse hover
<p>I  am trying to make my navigation more accesssible that is, it should work with tab key. The idea is that everything with the inner div is hidden on page load and,  on hover or focus on any of the Test anchors, the corresponding div should appear. </p>

<p>I am able to get the hover to work without jquery, that is with just CSS. However, i cannot do the same for focus.</p>

<p>So i decided to write a bit of jquery but i am quite getting it. Any help would be greatly appreciated.</p>

<pre><code>&lt;div class="nav"&gt;
    &lt;ul&gt;
        &lt;li&gt;
            &lt;span&gt;&lt;a href=""&gt;Test 1&lt;/a&gt;&lt;/span&gt;
            &lt;div&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt; 
                    &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;&lt;a href=""&gt;Test 2&lt;/a&gt;&lt;/span&gt;
            &lt;div&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;span&gt;&lt;a href=""&gt;Test 3&lt;/a&gt;&lt;/span&gt;
            &lt;div&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href=""&gt;Link 3&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;


.nav ul li {float: left;}
.nav ul li div {position:absolute; left: -999px;}


$('.nav ul li span a').focus(function(){
    $('.nav ul li div').css({'left': '0'});
}).focusout();
</code></pre>
