Положение подменю в простом раскрывающемся меню ⇐ CSS

[Anonymous]

Предположим, у нас есть простое вложенное меню в HTML:

Код: Выделить всё

[list]
[*]something

somethingelse1
[*]somethingelse2
[/list]

 ... etc.

И столь же простой CSS, который позволяет отображать подменю при перемещении курсора в любую позицию:

Код: Выделить всё

    #top-menu ul {
display: none;
}

#top-menu li:hover > ul {
display: block;
}

#top-menu {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}

#top-menu > li {
position: relative;
padding: 10px;
cursor: pointer;
}

#top-menu > li > ul {
position: absolute;
top: 0;
left: 25%;
list-style: none;
background-color: #fff;
padding: 0;
margin: 0;
z-index: 1000;
min-width: 150px;
}

#top-menu > li > ul > li {
padding: 10px;
background-color: #ffffff;
cursor: pointer;
}

#top-menu > li > ul > li > ul {
position: absolute;
top: 0;
left: 25%;
list-style: none;
background-color: #fff;
padding: 0;
margin: 0;
z-index: 1000;
}

Приведенный выше код дает результат, похожий на этот (у меня был курсор над «Заглавные буквы»):


Как вы можете видеть, когда я выбираю пункт «Заглавные буквы», первый пункт подменю находится на той же высоте, что и родительский элемент.
Что мне нужно исправить в коде, чтобы независимо от того, какой элемент в главном меню я выбираю, первый элемент подменю находился на той же высоте, что и первый элемент в главное меню?

Подробнее здесь: https://stackoverflow.com/questions/792 ... -down-menu