Проблемы блочного меню, перенос пунктов.

[Quanto]

Есть проблемка. Начал писать сайт, (заранее простите за код ,много лишнего) столкнулся с проблемой,при создании блочного меню.

Уверен что-то делаю не правильно, но хоть убей не могу найти причину.

И из за отсутствия опыта не могу осуществить задуманное. В общем, суть такова:есть блочная шапка, в ней

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

торчать и создает тем самым полосу прокрутки.

Вопрос №1 что с ним делать,как сделать "резиновым"?

Вопрос №2 как осуществить перенос выходящих за границу родителя пунктов меню ,во вторую строку?

Вопрос №3 какими элементами удобнее сделать подобное меню?

P.S. Заранее спасибо за помощь.

Желательно CSS/HTML решения.

Простите если что то не так http://jsfiddle.net/...tozzz/w6nCK/13/

, я не волшебник, я только учусь.)

[Libiros]

Ну до идеала я доводить не стал, но суть ты должен уловить. http://jsfiddle.net/Libiros/7DUCw/

Слишком много было абсолютно позиционированных элементов.

Зачем подобные вставки?

background-image:none;
background-repeat: repeat-y;

Некоторые части убрал. Может, зря, потому что они могли использоваться при дальнейшей разработке, но добавить их не составит труда.

Также в начале вставил сброс, без него всё худо

ul,ol {list-style: none;}
		  ul,ol,dl,li,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote {margin: 0; padding: 0;}
		  img {border: 0;}

Резиновым меню делается, если position:relative, потому как элементы с absolute не будут сжиматься, зачем им?

Тем самым, пункты меню будут автоматически выходить во вторую, третью, четвертую и т.д. строки.

В элементах для такого меню не уверен, но делаю с помощью ul, хотя, видимо, это неправильно, ведь ul - нумерованный список.

[Quanto]

Спасибо что посмотрели.

background-image:none; background-repeat: repeat-y;

По поводу этой строки и лишнего, так это я меню выдернул из общего css всей страницы,чтобы меньше объем кода был,что то не усмотрел.

А от relative я отказался из за того ,что кнопки начинают дергаться, при наведении, из за изменения отступов,:hover{padding:2px} но и без отступов, незначительное смещение происходит, глаз не радует.Вот и парился с absolute, думал если указать в % отступы и прочее,что то измениться .Но все бесполезно похоже .Если только ,можно как то убрать подергивания при наведении, не сталкивались?

(ul- unordered list ol-ordered list )может не нумерованный (не упорядоченный )?

[Libiros]

Если я правильно понял проблему, то в li a нужно вставить box-sizing: border-box;

[Quanto]

Да , это то что нужно, спасибо , помогло . Все ,теперь прощай абсолют и бессонные ночи.

Пробовал до этого box-sizing только с content-box был близок )

Еще раз спасибо, спасли.

Edited March 22, 2013 by Quanto