Menu with tab-index

HTML

<nav>
    <ul class="links">
        <li><a href="#i1">Item 1</a></li>
        <li><a href="#i2">Item 2</a>
            <ul class="links">
                <li><a href="#i2-1">Item 2.1</a></li>
                <li><a href="#i2-1">Item 2.2</a></li>
            </ul> 
        </li>
    </ul>
    <form>
        <fieldset class="combo">
            <input type="search" />
            <input type="submit" />
        </fieldset>
    </form>
</nav>

CSS

nav {
    display: table;
}
nav > *{
    display: table-cell;
}
.links > li {
    display: inline-block;
    position: relative;
}
.links > li ul {
    position: absolute;
    left: -9999em;
}
.links > li a:hover + ul,
.links > li a:focus + ul,
.links > li a:active + ul{
    left: 0;
}
.links > li:not(:hover) li a:focus {
    left: 9999em;
    position: relative;
}