Выберите ли в списке

Список:

    <ul>
        <li>
            <a href="#">Item 1</a>
            <ul>
                <li>
                    <a href="#">Item 1-1</a>
                    <ul>
                        <li><a href="#">Item 1-1-1</a></li>
                        <li>
                           <a href="#">Item 1-1-2</a>
                           <ul>
                              <li><a href="#">Item 1-1-2-1</li>
                           </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Item 1-2</a></li>
                <li><a href="#">Item 1-2</a></li>
            </ul>
        </li>
        <li><a href="#">Item 2</a></li>
    </ul>

Вот некоторые соответствующие CSS

#nav ul ul {
    display: none;
}

#nav ul li:hover > ul {
    display: block;
}

Первый скроет каждый выпадающий элемент. Вторая будет соответствовать любой ul, которая является дочерним элементом родительского элемента #nav ul li: hover, если таковой отображается: блок и выпадающее изображение видны.

Теперь, поскольку при наведении элемента элементы внутри будут просто перечислены ниже, это не то, что я ищу. Я хочу переместить позиции 1-1-1 и пункт 1-1-2 справа от пункта 1-1, позиция 1-1-1 должна быть справа, пункт 1-1-2 будет быть ниже (действуя как раскрывающийся список). Я не уверен, как я выбираю этот элемент. Пример: http://line25.com/wp-content/uploads/2012/css-menu/demo/index.html

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

http://jsfiddle.net/Gq8C2/

Я пробовал с первым ребенком, например:

#nav ul li:hover > ul li:first-child {
    display: block;
}

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

Должен быть лучший способ сделать это...

Как его выбрать? И как я могу сделать подобное поведение, описанное выше?