Абсолютное позиционирование относительно родительского элемента

Здравствуйте.

Как можно указать, чтобы позиционирование списка <ul><li><ul> было относительно его родителя, а именно пункта другого списка <ul><li>?

Вот как есть, а нужно, чтобы "Архив новостей" и т.д. был под "новостями" и его можно было перемещать с помощью свойств left, right, top, bottom.

Вложение 2750

<div id="menu">

  <ul>

    <li>

      <a href="#">Новости</a>

      <ul>

        <li><a href="#">Архив новостей</a></li>

        <li><a href="#">Пресса о клубе</a></li>

      </ul>

   </li>

    <li><a href="#">Команда</a></li>

    ...

  </ul>

</div>

#menu {

  float: right;

  margin-top: -23px;

  padding: 0 15px;

}

#menu li {

  display: inline;

  padding: 5px 12px;

}

#menu a {

  color: white;

  font-size: 15px;

  font-weight: bold;

  text-decoration: none;

}

#menu li:hover {

  background-color: black;

}

#menu ul li ul li {

  position: absolute;

  top: 0px;

}

#menu ul li ul li {

  display: block;

}

Родительскому блоку также нужно задавать позиционирование. Из справочника htmlbook.ru:

Цитата:

---

Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

---

задайте тому блоку относительно которого хотите позиционировать
position:relative