Настройка ширины <ul>для размещения пунктов меню с помощью jQuery

Question

Это расширение вопроса, который я опубликовал некоторое время назад: Подгонка ширины

Существует ли фрагмент кода jQuery, который может регулировать ширину каждого <ul> внутри определенного <ul>, чтобы убедиться, что элементы <li> не переполняются? Меню выглядит примерно так:

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Если я не настрою <ul> правильно, раскладка выглядит испорченной, как показано здесь:

Меню сайта http://img838.imageshack.us/img838/1288/menu.jpg

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

Answer 1

Проблема ширины на самом деле проистекает из ширины, заданной здесь на верхнем уровне:

ul#menu > li {
  display: block;
  float: left;
  background: url(img/menuitem.png) top left;
  width: 104px;                                 /* here's the issue */
  height: 36px;
  margin-right: 1px;
  text-align: center;
  position: relative;                           /* add this */
}

Поскольку для него задано width, а его дочерний элемент находится в нормальном потоке, его дочерний элемент подчиняется его ширина, а не масштабирование само по себе.Что вы можете сделать, это вывести ребенка из потока, добавив position: realtive;, как у меня в вышеприведенном стиле, а затем дать ребенку <ul> a position: absolute, например:

ul#menu > li ul {
  position: absolute;
  top: 36px;              /* top <li> is 36px, go down that much */
}

Затем, наконец, чтобы якорный текст получил полный фон, задайте ему правило white-space, например:

ul#menu > li > a, ul#menu > li > ul a {
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

Вот как выглядит результат: alt text http://img189.imageshack.us/img189/3817/menuye.jpg

Answer 2

Это все, что вам нужно сделать (и интервал должен соответствовать вашей теме):

ul#menu > li > ul {
  position: absolute;
  top: 37px;
}

Answer 3

Если вы удалите свойство line-height из:

ul#menu > li > ul li {
  color:black;
  font-size:10pt;
   /*line-height:30px;*/
  text-align:left;
}

Отображается нормально или установите line-height на меньшее значение, например 20px