Положение подменю в простом раскрывающемся меню ⇐ 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;
}

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

[list]
something

somethingelse1
[*]somethingelse2
[/list]

[*] ... etc.

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


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

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