Резиновое меню при помощи таблицы

[Bryant-24]

Я начал заниматься версткой совсем недавно и хотел бы узнать. Хочу сделать резиновое меню на сайте, но возник один вопрос - можно ли сделать меню через таблицу, как показано на рисунке:Сейчас поясню, то есть каждая ячейка (кроме 1 и 2 на рисунке) при наведении будут выдавать выпадающий список. При этом, насколько я понимаю, при наведении на ячейку, выпадающий список появляется в виде таблицы. Возможно ли это?

[Gaspode]

По-моему так нет. Тут же позиционирование нужно, а таблицы с позиционированием не дружат.

[Vlad]

В чём резиновость этого меню? В большинстве случаев для его создания можно и без таблиц обойтись.

[Bryant-24]

Почему выбрал именно через таблицы - потому что с ее помощью легче будет расставить по углам рисунок (1 и 2 ячейка) и задать 100% ширину экрана. А еще поводом послужило следующее, на рисунке видно, что мне необходимо, чтобы после выпадающего списка была декоративная рамка.

Edited August 31, 2011 by Bryant-24

[Gaspode]

Это без таблиц всё делается на ура.

[Bryant-24]

Даже если я скажу, что этот декоративный элемент выступает в роли рисунка? Все равно можно без таблиц обойтись?

[Gaspode]

Дык да же. В background его затолкать - и будет вам счастье.

[Vlad]

Единственная необходимость таблицы в данном случае это сделать меню шириной 100% и чтобы пункты занимали автоматическую ширину, как это делают ячейки. Но это редко используется. Ниспадающее меню может занимать фиксированный размер, а "ячейки" иметь одну ширину. Тогда <ul>,<li> дают больше преимуществ.

[psywalker]

Тут таблицы нафиг не нужны, кроме случая, про который Влад сказал. Всё делается обычным блочным методом.

[Bryant-24]

Понял, всем спасибо за советы - буду пробовать верстать.

[Bryant-24]

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

Вот что имею:

А вот, что необходимо получить:

Ну и собственно коды, index.html:

<!--меню-->
<table id="menu">
	<tr id="menu_bg">
		<td id="menu_left"></td>
		<td id="menu_td">
			<ul class="menu_ul">
				<li><a href="">Об агенстве</a>
					<ul>
						<li><a href="">Как нас найти</a></li>
						<li><a href="">О нас</a></li>
						<li><a href="">Принцип работы</a></li>
						<li><a href="">Наши сотрудники</a></li>
					</ul>
				</li>
			</ul>
		</td>
		<td class="menu_td">
			<ul class="menu_ul">
				<li><a href="">Работадателю</a>
					<ul>
						<li><a href="">Советы по подбору <br> персонала</a></li>
						<li><a href="">Оформить заявку</a></li>
						<li><a href="">Прайс-лист</a></li>
						<li><a href="">Как написать <br> рекомендательное <br> письмо</a></li>
					</ul>
				</li>
			</ul>
		</td>
		<td class="menu_td">
			<ul class="menu_ul">
				<li><a href="">Соискателю</a>
					<ul>
						<li><a href="">Советы по поиску <br> работы</a></li>
						<li><a href="">Заполнить анкету</a></li>
						<li><a href="">Собеседование в <br> агенстве</a></li>
						<li><a href="">Вакансии</a></li>
					</ul>
				</li>
			</ul>
		</td>
		<td class="menu_td">
			<ul class="menu_ul">
				<li><a href="">Домашний персонал</a>
					<ul>
						<li><a href="">Няня</a></li>
						<li><a href="">Гувернантка</a></li>
						<li><a href="">Домработница</a></li>
						<li><a href="">Семейная пара</a></li>
						<li><a href="">Семейный водитель</a></li>
						<li><a href="">Повар</a></li>
						<li><a href="">Сиделка</a></li>
						<li><a href="">Репетитор</a></li>
					</ul>
				</li>
			</ul>
		</td>
		<td class="menu_td">
			<ul class="menu_ul">
				<li><a href="">Услуги мамам</a>
					<ul>
						<li><a href="">Описание услуг</a></li>
						<li><a href="">Молодая мама</a></li>
						<li><a href="">Деловая мама</a></li>
					</ul>
				</li>
			</ul>
		</td>
		<td class="menu_td">
			<ul class="menu_ul">
				<li><a href="">Вопросы и отзывы</a>
					<ul>
						<li><a href="">Задать вопрос</a></li>
						<li><a href="">Вопросы и ответы</a></li>
						<li><a href="">Отзывы</a></li>
					</ul>
				</li>
			</ul>
		</td>
		<td class="menu_td">
			<ul class="menu_ul">
				<li><a href="">Статьи</a></li>
			</ul>
		</td>
		<td id="menu_right"></td>
	</tr>
</table>

И style.css:

/*меню сайта*/
#menu {
	height: 51px;
	width: 100%;
}

#menu_bg {
	background: url(images/menu.png);
}

#menu_left {
	background: url(images/menu_left.png) no-repeat;
	width: 24px;
}

#menu_right {
	background: url(images/menu_right.png) no-repeat;
	width: 24px;
}

.menu_td {
		height: 51px; /*высота ячеек*/
}

.menu_ul{
	display: table-cell; /*внутренние списки выровнены по середине*/
	vertical-align: middle;
}

.menu_ul li {
    float: left; /* элементы списков всплывают влево */
}
.menu_ul ul li {
    float: none; /* отменяем всплытие для внутренних элементов списков */
}
.menu_ul a {
    display: block; /* делаем ссылки блоками */
    color: #fff; /* цвет текста ссылок */
    text-decoration: none; /* убираем подчеркивание */
    white-space: nowrap; /* запрещаем перевод строк */
    padding: 5px 3px; /* внутренние отступы */
}

.menu_ul ul a {
    min-width: 150px; /* минимальная ширина подпунктов */
}

.menu_ul ul {
    position: absolute; /* абсолютное позиционирование внутренних списков */
    display: none; /* скрываем внутренние списки */
}
.menu_ul li:hover ul, .menu_ul li.ie6 ul {
    display: block; /* делаем внутренние списки блочными при наведении мыши на внешние элементы LI */
   }
.menu_ul li:hover ul a, .menu_ul li.ie6 ul a {
    color: #fff; /* цвет текста внутренних ссылок */
    background: #DD8510; /* цвет фона */
   }
.menu_ul li:hover a, .menu_ul li ul a:hover, .menu_ul li.ie6 a {
    color: #fff; /* цвет текста внешних ссылок при наведении курсора на LI,
                    а также внутренних ссылок при наведении курсора на них самих */
    background: #BC710D; /* фон */
   }

Подскажите, как это исправить?

[Vlad]

Обнулите у UL margin и padding.