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> Буду очень признателен, если подскажите как это исправить.