Вертикальное меню на чистом CSS с подменю

Я провел исследование и смог воспроизвести то, что ищу, ну вроде --Мне просто нужна помощь с более конкретная вертикаль, чистый CSS, меню.

Я хочу, чтобы мое всплывающее меню -появлялось на 10 пикселей левее атрибута a, а не атрибута li, как в большинстве примеров, найденных в Интернете. Я также ищу самый простой, чистый CSS, тип меню --Ничего особенного.

Вот что я сделал до сих пор:

<div id="nav">
    <ul class="top-level">
        <li><a href="#">This is a long text</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact me here</a></li>
        <li><a href="#">Help</a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
    </ul>

мой css:

#nav {border:1px solid cyan;}
    /* top level menu */
    #nav ul.top-level {border:1px solid red;}
    #nav ul.top-level li {position:relative;}

    /* sub level menu */
    #nav ul.sub-level {border:1px solid yellow;}
    #nav ul.sub-level {display:none;} /* hide */

    /* hover the sub menu*/
    #nav ul.top-level li:hover.sub-level {display: block; position:absolute; top:5px;}

Как мне сделать так, чтобы меню подуровня всплывало, когда я наводил курсор на aякорь HTML, а не на li, и 10px к слева от нажатой привязки a? Спасибо.