Автоуменьшение горизонтального меню

[ЗлОй ПрОграММер]

Здравствуйте, есть горизонтальное меню оформленное через CSS, вроде бы как надо сделано, но при уменьшении окна последний блок меню сползает вниз, а хотелось бы чтобы меню уменьшалось всего навсего, нет конечно оно уменьшается, но всё равно как-бы не успевает.

вот url демо-сайта: http://trebolka.16mb.com/ попробуйте уменьшить окно и будет видно как один пункт меню перейдёт ниже

вот CSS код:

#mainmenu
{
	width: 100%;
}
#mainmenu ul
{
	list-style: none;
	display: table;
	padding: 5px 0px;
	margin: 0px auto;
}
#mainmenu li
{
	list-style: none;
	display: block;
	float: left;
	margin: 0px 1px;
}
#mainmenu li a
{
	display: block;
	float: left;
	height: 66px;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	background: url(/images/menu/mbleft1.png) no-repeat left;
	line-height: 43px;
	padding: 0px 0px 0px 7px;
	text-decoration: none;
}
#mainmenu li a span
{
	display: block;
	float: left;
	background: url(/images/menu/mbright1.png) no-repeat right;
	height: 66px;
	color: #fff;
	line-height: 43px;
	padding: 0px 14px 0px 6px;
}
#mainmenu li a:hover
{
	display: block;
	float: left;					
	background: url(/images/menu/mbleft2.png) no-repeat left;
	height: 66px;
}
#mainmenu li a:hover span
{
	display: block;
	float: left;					
	background: url(/images/menu/mbright2.png) no-repeat right;
	color: #fff;
	height: 66px;
}
#mainmenu li.current-menu-item a
{
	display: block;
	float: left;
	height: 66px;
	color: #fff;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	background: url(/images/menu/mbleft2.png) no-repeat left;
	line-height: 43px;
	padding: 0px 0px 0px 7px;
	text-decoration: none;
}
#mainmenu li.current-menu-item a span
{					
	display: block;
	float: left;
	background: url(/images/menu/mbright2.png) no-repeat right;
	height: 66px;
	color: #fff;
	line-height: 43px;
	padding: 0px 14px 0px 6px;
}

Edited September 1, 2012 by ЗлОй ПрОграММер

[USF]

искренне не пойму, зачем всему подряд писать

display: block;
        float: left;

мало того, что при float: left элемент становится блочным все равно, так еще и во всех случаях, кроме #mainmenu li он абсолютно не нужен.

[ЗлОй ПрОграММер]

искренне не пойму, зачем всему подряд писать

display: block;
        float: left;

мало того, что при float: left элемент становится блочным все равно, так еще и во всех случаях, кроме #mainmenu li он абсолютно не нужен.

убрал лишнее, но проблема не в этом

[USF]

да, проблема не в этом, я лишь указал на ошибки, которые в будущем приведут к другим проблемам.

насчет вашей текущей - не помешало бы глянуть на страницу, понятно, что элементы попросту не умещаются

[ЗлОй ПрОграММер]

сайт на wordpress, адрес сайта я выложил а вот кусок значимового на мой взгляд CSS кода:

/* =Structure
———————————————-- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}

P.S. ширину сайта я увеличивать не хочу, меня 1000px устраивает, хочу лишь чтобы меню успевало уменьшаться. Зашёл сегодня с телефона на сайт и из за маленького разрешения все блоки почти вертикально расположились, а хотелось бы чтобы в линию, но меньшего размера стали

Edited September 1, 2012 by ЗлОй ПрОграММер