HTML+CSS+JavaScript

Добрый день. Понадобилось сделать выпадающее вертикальное меню, но немного не совсем обычное. В архиве картинка и файлы своей разработки вместе со стилями. Не совсем получается то что бы хотелось. А именно, когда навожу на ссылку "Разработка", то она расширяется, а должна бы оставаться на месте, а третье за ним слово вообще тогда сползает на другую строчку. А выпадающий список появляется, но он должен находится за бордюрчиком в виде точек. На рисунке и открыв сам файл, думаю можно понять что я имею в виду. Помогите пожалуйста разобраться

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

Т.е. получается, что вложение списка в список уже не надо делать, а сделать ниже один блок, а при наведении содержимое показывать в нем?

Это - как вариант, решений всегда несколько.
Можно задать родительскому li свойство overflow:visible, поиграться с выравниванием текста и высотой-шириной блока, но это все ни к чему, раз jQuery уже подключили.

Сделал в коде следующее, но мне кажется уже бред получается

<li><a href="#">РАЗРАБОТКА</a>     <!-- Элементы подменю -->      <ul class="sub">                  <div id="sub">                      <li><a href="#">Сайты под ключ</a></li>                      <li><a href="#">Приложения для мобильных устройств</a></li>                      <li><a href="#">Приложения для социальных медиа</a></li>              </div>      </ul> </li>

Выпадать то, выпадает, но теперь эта "дочка" берет ширину от "мамаши" своей "Разработка".

В общем заработало. Почему не понял, но убрал position:relative из файла стилей для div#navig li. Ну и уже для блока #sub подправил верхний внутренний отступ padding и теперь работает. Остается по дизайну теперь красоту подогнать и все. Вот только почему позиция мешала, не могу понять. Спасибо Вам за подсказку, я упустил из виду, что дочка же наследует стили от родителя

маленький совет - не выкидывайте на рассмотрение большие куски кода.
Есть затыка - откусывайте главное и на конкретном примере решайте. То есть, если надо запилить выпадючее меню, то нужен ТОЛЬКО этот кусок разметки, ЭТОТ кусок стилей и ЭТОТ кусок скрипта. В хорошо поставленном вопросе 99% ответа. И листинги на десять килобайт никто читать не хочет. И я бы не стал, если бы не лень было работу работать.
По правде, я ваше меню на работе сделал и запустил. Но лучше дать человеку удочку, нежели рыбу )

Еще раз спасибо. В следующий раз буду выбирать конкретные куски кода. Появилась еще одна заминка. Оказывается, когда стал проверять в опере (не люблю этот браузер) выпадающее меню вылезает как вертикальный столбец. Из за чего это может быть?

ширина списка? ширина родителя? свойство float?

В чем проблема разобрался. Но, испробовав все хаки для опера (у меня лично 12.01 версия) так и не получилось, т.е. не работают эти хаки.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {       #sub{ position: static; }  /* для Opera 9.6 и выше */ }  @media (0) {      #sub{ position: static; }  /* для Opera 10.0 */ }  html:first-child #sub{ position: static; } /* для Opera 9.2 и ниже */ @media all and (min-width: 0) {    #sub{ position: static; }  } *|html[xmlns*=""] #sub{ position: static; }

Какой же хак все же подходит под новую оперу?

Это дебри. Надо начать с начала, отделить меню от всего остального и заставить работать отдельно, а потом вставить в проект. Берем отдельно кусок разметки, отвечающий за меню, пишем ему свой стиль и свои скрипты.
Поверьте, для такой простой штуки, как выпадающее меню, никакие хаки не нужны со времен 6-го IE.

Хаки все же потребовались. Но уже не такие дебри, это точно. Все решил. Спасибо за помощь и подсказку