Меню выезжающее

<style type="text/css">ul.navi { position:relative; z-index:100; padding:0; margin:0 0 0 60px; list-style:none; width:auto; height:30px; } ul.navi > li { width:48px; height:30px; position:absolute; left:0; top:0; -moz-transition: -moz-transform 0.5s ease-in-out; -ms-transition: -ms-transform 0.5s ease-in-out; -o-transition: -o-transform 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; } ul.navi a { display:block; width:48px; height:30px; position:absolute; left:0; top:0; line-height:30px; text-align:center; text-decoration:none; } ul.navi a img { border:0; } ul.navi a span { position:absolute; left:5px; font-size:11px; font-weight:bold; color:#fff; } ul.navi:hover { height:100px; } ul.navi:hover li#n1 { -moz-transform: translatex(0px); -ms-transform: translatex(0px); -o-transform: translatex(0px); -webkit-transform: translatex(0px); transform: translatex(0px); } ul.navi:hover li#n2 { -moz-transform: translatex(70px); -ms-transform: translatex(70px); -o-transform: translatex(70px); -webkit-transform: translatex(70px); transform: translatex(70px); } ul.navi:hover li#n3 { -moz-transform: translatex(140px); -ms-transform: translatex(140px); -o-transform: translatex(140px); -webkit-transform: translatex(140px); transform: translatex(140px); } ul.navi:hover li#n4 { -moz-transform: translatex(210px); -ms-transform: translatex(210px); -o-transform: translatex(210px); -webkit-transform: translatex(210px); transform: translatex(210px); } ul.navi:hover li#n5 { -moz-transform: translatex(280px); -ms-transform: translatex(280px); -o-transform: translatex(280px); -webkit-transform: translatex(280px); transform: translatex(280px); } ul.sub { padding:0; margin:0; list-style:none; width:48px; height:30px; position:absolute; left:0; top:0; z-index:-1; opacity:0; -moz-transition: opacity 0s linear 1s; -ms-transition: opacity 0s linear 1s; -o-transition: opacity 0s linear 1s; -webkit-transition: opacity 0s linear 1s; transition: opacity 0s linear 1s; } ul.sub li { width:48px; height:30px; position:absolute; left:0; top:0; z-index:-1; -moz-transition: -moz-transform 0.5s ease-in-out 0.5s; -ms-transition: -ms-transform 0.5s ease-in-out 0.5s; -o-transition: -o-transform 0.5s ease-in-out 0.5s; -webkit-transition: -webkit-transform 0.5s ease-in-out 0.5s; transition: transform 0.5s ease-in-out 0.5s; } ul.navi > li:hover ul { opacity:1; -moz-transition: opacity 0s linear 0.5s; -ms-transition: opacity 0s linear 0.5s; -o-transition: opacity 0s linear 0.5s; -webkit-transition: opacity 0s linear 0.5s; transition: opacity 0s linear 0.5s; } ul.navi li:hover ul li.l { -moz-transform: translatex(-70px) translatey(60px); -ms-transform: translatex(-70px) translatey(60px); -o-transform: translatex(-70px) translatey(60px); -webkit-transform: translatex(-70px) translatey(60px); transform: translatex(-70px) translatey(60px); } ul.navi li:hover ul li.c { -moz-transform: translatey(60px); -ms-transform: translatey(60px); -o-transform: translatey(60px); -webkit-transform: translatey(60px); transform: translatey(60px); } ul.navi li:hover ul li.r { -moz-transform: translatex(70px) translatey(60px); -ms-transform: translatex(70px) translatey(60px); -o-transform: translatex(70px) translatey(60px); -webkit-transform: translatex(70px) translatey(60px); transform: translatex(70px) translatey(60px); } </style> </p>  <ul class="navi">  <li id="n1"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu1</span></a>   <ul class="sub">  <li class="l"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu11</span></a></li>  <li class="c"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu12</span></a></li>  <li class="r"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu13</span></a></li>  </ul>  </li>  <li id="n2"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu2</span></a>  <ul class="sub">  <li class="l"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu21</span></a></li>  <li class="c"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu22</span></a></li>  <li class="r"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu23</span></a></li>  </ul>  </li>  <li id="n3"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu3</span></a>  <ul class="sub">  <li class="l"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu31</span></a></li>  <li class="c"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu31</span></a></li>  <li class="r"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu31</span></a></li>  </ul>  </li>  <li id="n4"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu4</span></a>  <ul class="sub">  <li class="l"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu41</span></a></li>  <li class="c"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu41</span></a></li>  <li class="r"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu41</span></a></li>  </ul>  </li>  <li id="n5"><a href="#"><img alt="" src="http://delaisait.ucoz.ru/script/menu/img/1/btn.png" /><span>Menu</span></a></li> </ul>