Помогите переделать меню из горизонтального в вертикальное <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="author" content="styledmenus.com" /><link href="sty.css" rel="stylesheet" media="all" /></head><body><ul id="cssmenu"> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Проект "Заминожка"</a> <ul> <li><a href="#">Почему "Заминожка"?</a></li> <li><a href="#">Знакомство с искусством</a> <ul> <li><a href="#">Виды</a> <ul> <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> </li> <li><a href="#">Материалы</a></li> </ul> </li> </ul> </li> <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> </ul> </li> <li><a href="#" title="Как с нами связаться">Обратная связь</a></li> <li><a href="#" title="Как с нами связаться">Контакты</a></li></ul>ul#cssmenu { width:100%; margin: 0; border: 0 none; padding: 0; list-style: none; background: #B0E2FF; height: 30px; font: bold 12px/28px Verdana, Arial; } ul#cssmenu li { margin: 0; border: 0 none; padding: 0; float: left; display: inline; list-style: none; position: relative; height: 30px; transition-duration: 0.5s;} ul#cssmenu ul { margin: 0; border: 0 none; padding: 0; width: 160px; list-style: none; display: none; position: absolute; top: 30px; left: 0;} ul#cssmenu ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility: hidden;} ul#cssmenu ul li { width: 300px; float: left; display: block !important; display: inline;}ul#cssmenu a { transition-duration: 0.5s; border: 0px; padding: 0 10px; float: none !important; float: left; display: block; background: #B0E2FF; color: #FFFFFF; font: bold 12px/28px Verdana, Arial; text-decoration: none; height: auto !important; height: 1%; width:auto;} ul#cssmenu a:hover,ul#cssmenu li:hover a,ul#cssmenu li.iehover a { background: #fff; color:#000; } ul#cssmenu li:hover li a,ul#cssmenu li.iehover li a { float: none; background: #B0E2FF; color: #FFFFFF; transition-duration: 0.5s;} ul#cssmenu li:hover li a:hover,ul#cssmenu li:hover li:hover a,ul#cssmenu li.iehover li a:hover,ul#cssmenu li.iehover li.iehover a { background: #ADD8E6; color:#fff; border-left: solid 1px #5CACEE; margin-right: 35px;} ul#cssmenu ul ul { display: none; position: absolute; top: 0; left: 270px;} ul#cssmenu li:hover ul ul,ul#cssmenu li:hover ul ul ul,ul#cssmenu li:hover ul ul ul ul,ul#cssmenu li.iehover ul ul,ul#cssmenu li.iehover ul ul ul,ul#cssmenu li.iehover ul ul ul ul{ display: none;} ul#cssmenu li:hover ul,ul#cssmenu ul li:hover ul,ul#cssmenu ul ul li:hover ul,ul#cssmenu ul ul ul li:hover ul,ul#cssmenu li.iehover ul,ul#cssmenu ul li.iehover ul,ul#cssmenu ul ul li.iehover ul,ul#cssmenu ul ul ul li.iehover ul { display: block;}
