HTML+CSS+JavaScript

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

Как бы её устранить?

<ul id="navbar">     <li><a href="/">Главная</a></li>     <li><a href="#">Миссия</a></li>     <li><a href="#">Услуги и цены</a></li>     <li><a href="#">Вопросы и ответы</a>         <ul>             <li><a href="#">Часть 1</a></li>             <li><a href="#">Часть 2</a></li>         </ul>     </li>     <li><a href="#">Портфолио</a>         <ul>             <li><a href="#">Часть 1</a></li>             <li><a href="#">Часть 2</a></li>             <li><a href="#">Часть 3</a></li>             <li><a href="#">Часть 4</a></li>             <li><a href="#">Часть 5</a></li>             <li><a href="#">Часьб 6</a></li>         </ul>     </li>         <li><a href="#">Благодарности</a>         <ul>             <li><a href="#">Часть 1</a></li>             <li><a href="#">Часть 2</a></li>         </ul>     </li>     <li><a href="#">Контакты</a></li> </ul>

ul#navbar{     border:0;     border-left:1px solid white;     height:30px;            /* высота списка */     list-style:none;        /* отменяем маркер для списка */     margin: 20px auto;       /* выравниваем меню на странице */     padding:0px;            /* обнуление полей */     width:750px;            /* задаем ширину меню */     position:absolute;      top:    220px;     /* здесь я его подгоняю под свой дизайн */      left:    200px; } ul#navbar li, ul#navbar li a{     display:block;     float:left;     position:relative; } ul#navbar li a{     background:url(bg.png) repeat-x 0 0; /* фон элемента меню */     border:1px solid white;     border-left:0;     color:white;               /* цвет текста */     font:normal 16px arial;    /* описываем шрифт */     height:18px;               /* задаем высоту для элемента */     margin:0px;     padding:5px 0;     text-align:center;         /* текст в ячейке "по центру" */     text-decoration:none;      /* отмена декораций */     width:99px;                    /* Ширина */ } ul#navbar li a:hover, ul#navbar li:hover a{     background:url(bg.png) repeat-x  0px -30px; } ul#navbar li ul{     display:none;                /* скрываем второй уровень */     left:0px;     list-style:none;     position:absolute;          /* задаем абсолютное позиционирование */     top:30px;                      /* отступ сверху */     z-index:10;                    /* "подымаем" над остальными элементами*/ } ul#navbar li:hover ul{     background:#1b64dc;     border:0px;     display:block;     float:none;     margin:0px auto;     padding:0px;     width:100px;                /* Ширина */ } ul#navbar li ul li, ul#navbar li:hover ul li a{     display:block;     float:none; } ul#navbar li:hover ul li a{     background:#1b64dc;     border:0;     color:white;     font-size:12px;     font-weight:normal;     height:20px;     line-height:20px;     padding:0px;     margin:0;     text-align:center;     white-space:nowrap;     width:100px;            /* Ширина */ } ul#navbar li:hover ul li a:hover{     background:#ef007c; }

Эх, знать бы, что вы имеете в виду под словом "окна" :-)

Эх, знать бы, что вы имеете в виду под словом "окна" :-)

А вот что.

В Приложении скриншот того, как меню воспроизводится браузером. Все клеточки одинаковые, а потому у ссылки "Миссия" есть немного свободного места, а у ссылки "Услуги и цены" окно недостаточно для того, чтобы фраза поместилась полностью.

Может быть, можно сделать "резиновую" верстку?
Или для каждой ссылки установить индивидуально ширину окна для неё?

Честно говоря, я не понимаю вашего стремления зарегламентировать чуть ли не каждый размер в коде CSS.
Например, вы жёстко задаёте общий размер всего меню и при этом жёстко задаёте размеры всех тегов <LI> первого уровня. Что-нить одно надо - или размер всех входящих элементов (и тогда общий получится автоматом), или общий - тогда браузер сам подгонит всё под этот общий размер.

Подход ваш, на мой взгляд, неверен в принципе.
Лично я, когда верстаю, сначала даю браузеру "полную свободу", а потом начинаю ограничивать его только в тех местах, кои для меня критичны. И делаю это пошагово, каждое новое моё ограничение проверяя в разных броузерах.

Сформулируйте ваши минимальные, но точные требования к меню с точки зрения размеров и положения. А я постараюсь завтра найти время и сверстать вам.

Итак:
1) общая ширина всего меню - разве вам нужна точная в пикселях? Или вполне таки устроит - как получится по минимуму, исходя из одинаковых горизонтальных паддингов пунктов первого уровня?
2) общая высота пунктов меню первого уровня - разве нужна вам точная в пикселях? Или - как получится по минимуму, исходя из шрифта и вертикального паддинга?
3) высота пунктов второго меню разве нужна точная в пикселях? Или опять же достаточным будет размер шрифта и вертикальный паддинг?
4) привязывать всё меню в абсолютную систему координат - это-то вам зачем? Что, у вас там нет контейнера, куда спокойно можно будет просто "положить" это меню, задав контейнеру text-align: center?

В общем, подумайте, сформулируйте ТЗ.
Только правильно сформулируйте.
Чтобы не получилось, как у мужика с золотой рыбкой - "Хочу мужское достоинство аж до земли!", а та махнула хвостом и укоротила мужику ноги до 10 сантиметров :-)

Получается так:

1) общая ширина всего меню - разве вам нужна точная в пикселях? Или вполне таки устроит - как получится по минимуму, исходя из одинаковых горизонтальных паддингов пунктов первого уровня?
Предел общей ширины 752 рх.

2) общая высота пунктов меню первого уровня - разве нужна вам точная в пикселях? Или - как получится по минимуму, исходя из шрифта и вертикального паддинга?
Максимальная высота 35px.

3) высота пунктов второго меню разве нужна точная в пикселях? Или опять же достаточным будет размер шрифта и вертикальный паддинг?
Вполне достаточным будет размер шрифта и вертикальный паддинг.

4) привязывать всё меню в абсолютную систему координат - это-то вам зачем? Что, у вас там нет контейнера, куда спокойно можно будет просто "положить" это меню, задав контейнеру text-align: center?
Привязка к абсолютной системе координат совершенно необходима. Тут без вариантов.

См. аттач.

<!doctype> можете добавить, можете не добавлять - как вам нужно

Получилось просто замечательно!

И, кроме того, так хорошо и понятно написано, что читать и применять одно удовольствие!

Большое спасибо!