Не могу в меню выстроить блоги горизонтально

[ufo44]

Здравствуйте. Подскажите пожалуйста, как мне выстроить элементы меню вертикально, друг под другом. Сейчас они уезжают право друг за другом.

Подробнее на картинке

css код следующий

.menu {
	margin:0;
	padding:0;
	display: table-row;
	background: #cccccc;
	border-bottom-style:solid;
	border-bottom-width: 3px;
	border-bottom-color:#666666;
	display:block;

}

.menu li {
    width: auto;
    display: table-cell; 
    text-align: center;
    height: 30px; 
    padding-left: 0px;
    position:relative;

}

 li:first-child {
    padding: 0; 
}


.menu li a {

    color: #000;
    position: relative; 
    width: 1100px; 
    height: 30px;
    display: table-cell;
    vertical-align: middle; 


}

.menu li a:hover {
    background: #999;
    color: #fff;
}


/*— ВЫПАДАЮЩИЕ ПУНКТЫ —*/

.menu ul{
	position:absolute;
	left:-9999px; 
	opacity:0; 
	-webkit-transition:0.50s linear opacity;


}

.menu ul a{
	left:-40px;
	text-align:left;
	float:left;
	background-color:#666666;
	color:#CCCCCC;
	padding-left:5px;
	height: 20px;
	margin: 0px;


}

.menu li:hover ul{
	left:0; 
	opacity:1; 
	}

html код соответственно

<ul class="menu">
		<li><a href="#">Производство</a>
			<ul>
				<li><a href="#">Арматура</a></li>
				<li><a href="#">Арматурные сетки</a></li>
				<li><a href="#">Другая продукция</a></li>
			</ul>
		</li>
		<li><a href="#">Документы</a>
			<ul>
				<li><a href="#">Сертификаты и грамоты</a></li>
				<li><a href="#">ГОСТы и СНИПы</a></li>
				<li><a href="#">Другая документы</a></li>
			</ul>
		</li>
		<li><a href="#">Наши объекты</a></li>
		<li><a href="#">Партнёрство</a>
			<ul>
				<li><a href="#">Диллерам</a></li>
				<li><a href="#">Строителям</a></li>
				<li><a href="#">Производителям</a></li>
			</ul>
		</li>
		<li><a href="#">Полезная информация</a></li>
		<li><a href="#">Контакты</a></li>
		</ul>

Буду очень признателен, если подскажите как это исправить.

[DownHouse]

То что вы указывали для .menu li, наследуется и .menu li ul li

Нужно переопределить стили для элементов выпадающего меню.

Начните с этого

.menu li ul li {display:block;}

Edited October 29, 2012 by DownHouse