CSS3 Animated Menu

---

<ul class="nav">
   <li><a href="">Item 1</a></li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
   <li><a href="">Item 5</a></li>
   <li><a href="">Item 6</a></li>
</ul>

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

<ul class="nav">
   <li>
      <a href="">Item 1</a>
      <ul>
         <li><a href="">Item 1</a></li>
         <li><a href="">Item 2</a></li>
         <li><a href="">Item 3</a></li>
      </ul>      
   </li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
   <li><a href="">Item 5</a></li>
   <li><a href="">Item 6</a></li>
</ul>

• Item 1
  • Item 1
  • Item 2
  • Item 3
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

<ul class="nav">
   <li>
      <a href="">Item 1</a>
      <ul>
	   <li>
	      <a href="">Item 1</a>
	      <ul>
		   <li>
		      <a href="">Item 1</a>
		      <ul>
		         <li><a href="">Item 1</a></li>
		      </ul>      
		   </li>
	      </ul>      
	   </li>
         <li><a href="">Item 2</a></li>
         <li><a href="">Item 3</a></li>
         <li><a href="">Item 4</a></li>
         <li><a href="">Item 5</a></li>
         <li><a href="">Item 6</a></li>
      </ul>      
   </li>
   <li><a href="">Item 2</a></li>
   <li><a href="">Item 3</a></li>
   <li><a href="">Item 4</a></li>
   <li><a href="">Item 5</a></li>
   <li class="active"><a href="">Item 6</a></li>
</ul>

• Item 1
  • Item 1
    • Item 1
      • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6

.nav-black	.nav-black-button
Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-red	.nav-red-button
Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-green	.nav-green-button
Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-orange	.nav-orange-button
Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-blue	.nav-blue-button
Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4

Animations↑ Go top!

Adding simple CSS transitions to make it just a little less boring... :)

.nav-animation-1	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-animation-2	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-animation-3	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-animation-4	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4
.nav-animation-5	Item 1 Item 1 Item 2 Item 1 Item 2 Item 1 Item 2 Item 3 Item 3 Item 4 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 6 Item 2 Item 3 Item 4