<div class="example">  
  <ul class="nav">  
  <li>  
  <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->  
  <ul class="sub">  
  <li><a href="#"><b>Главная</b><p>Описание пункта меню</p><i></i></a></li>  
  <li><a href="#"><b>Уроки</b><p>Описание пункта меню</p><i></i></a></li>  
  <li><a href="#"><b>Ресурсы</b><p>Описание пункта меню</p><i></i></a></li>  
  <li><a href="#"><b>О нас</b><p>Описание пункта меню</p><i></i></a></li>  
  <li><a href="#"><b>Контакты</b><p>Описание пункта меню</p><i></i></a></li>  
  </ul>  
  <!--[if lte IE 6]></td></tr></table></a><![endif]-->  
  </li>  
  </ul>  
  <div style="clear:both"></div>  
</div>

ul.nav {  
  list-style:none;  
  height:120px;  
  margin:0;  
  padding:0;  
}  

ul.nav table {  
  border-collapse:collapse;  
  width:0;  
  height:0;  
  margin:-1px 0 -5px -1px;  
}  

ul.nav > li {  
  float:right;  
  height:120px;  
  width:40px;  
  position:relative;  
  overflow:hidden;  
  -webkit-transition-duration:.5s;  
  -moz-transition-duration:.5s;  
  -o-transition-duration:.5s;  
}  

* html ul.nav > li {  
  width:auto;  
}  

ul.nav > li a.ie6 {  
  float:left;  
  height:120px;  
  width:39px;  
  position:relative;  
  overflow:hidden;  
}  

ul.sub {  
  list-style:none;  
  height:120px;  
  width:600px;  
  background:url(/images/panel.png) no-repeat right top;  
  position:absolute;  
  left:0;  
  top:0;  
  margin:0;  
  padding:0;  
}  

ul.sub li {  
  float:left;  
}  

ul.sub li:first-child {  
  margin-left:45px;  
}  

ul.sub li a {  
  display:block;  
  width:110px;  
  height:120px;  
  float:left;  
  overflow:hidden;  
  position:relative;  
  text-decoration:none;  
  color:#000;  
}  

ul.sub li a b {  
  font-weight:700;  
  display:block;  
  padding:15px 15px 5px;  
}  

ul.sub li a p {  
  font-size:12px;  
  display:block;  
  margin:0;  
  padding:0 10px;  
}  

ul.sub li a i {  
  display:block;  
  width:64px;  
  height:64px;  
  position:absolute;  
  right:10px;  
  bottom:10px;  
  background:url(/images/post.png);  
  opacity:0.1;  
  filter:alpha(opacity = 10);  
  -webkit-transition-duration:.5s;  
  -moz-transition-duration:.5s;  
  -o-transition-duration:.5s;  
}  

ul.nav > li:hover {  
  width:600px;  
}  

ul.nav > li a.ie6:hover {  
  direction:ltr;  
  width:600px;  
}  

ul.sub li a:hover i {  
  opacity:1.0;  
}