Menu Dropdown tanpa javascript

Membuat menu dropdown tanpa menggunakan image dan javascript dapat membuat web anda jadi lebih ringan, karena tidak perlu load javascript untuk animasi menu dropdown nya.
DEMO

Dari contoh diatas menu dropdown tanpa menggunakan javascript.Untuk lebih jelasnya saya berikan untuk css nya sbb:

1. <style type="text/css"> 
2. .mnu {height:50px; position:relative; margin-bottom:200px;} 
3. .mnu ul {padding:0; margin:0; list-style:none; width:150px; float:leftleft;} 
4. .mnu ul ul {position:absolute; z-index:-1; 
5. -webkit-transition: 0.5s; 
6. -moz-transition: 0.5s; 
7. -ms-transition: 0.5s; 
8. -o-transition: 0.5s; 
9. transition: 0.5s; 
10. transition-delay: 0.5s; 
11. -o-transition-delay: 0.5s; 
12. -moz-transition-delay: 0.5s; 
13. -ms-transition-delay: 0.5s; 
14. -webkit-transition-delay: 0.5s; 
15. } 
16. .mnu ul ul ul {position:absolute; leftleft:150px; top:0;} 
17. .mnu ul ul ul.rgt {position:absolute; leftleft:auto; rightright:150px; top:0;} 
18.  
19. .mnu ul li {float:leftleft; width:150px; position:relative; z-index:10; background:url(trans.gif); 
20. -webkit-transition: 0.25s; 
21. -moz-transition: 0.25s; 
22. -ms-transition: 0.25s; 
23. -o-transition: 0.25s; 
24. } 
25. .mnu ul ul li { 
26. transition-delay: 1s; 
27. -o-transition-delay: 1s; 
28. -moz-transition-delay: 1s; 
29. -ms-transition-delay: 1s; 
30. -webkit-transition-delay: 1s; 
31. } 
32. .mnu ul ul ul li { 
33. transition-delay: 0.5s; 
34. -o-transition-delay: 0.5s; 
35. -moz-transition-delay: 0.5s; 
36. -ms-transition-delay: 0.5s; 
37. -webkit-transition-delay: 0.5s; 
38. } 
39.  
40. .mnu ul li a {display:block; width:139px; height:29px; padding-left:10px; background:#ddd; font:normal 12px/29px arial, sans-serif; color:#000; text-decoration:none; margin-bottom:1px; margin-right:1px; 
41. -o-border-radius: 10px; 
42. -moz-border-radius: 10px; 
43. -ms-border-radius: 10px; 
44. -webkit-border-radius: 10px; 
45. border-radius: 10px; 
46. } 
47. .mnu ul li a.fly {background:#ddd url(images/arrow.gif) no-repeat rightright center;} 
48. .mnu ul li:hover > a {background-color:#999; color:#fff;} 
49. .mnu ul li:hover > a.fly {background:#999 url(images/arrow-over.gif) no-repeat rightright center;} 
50.  
51. .mnu ul ul li {margin-top:-30px;} 
52. .mnu ul ul li.p1 {margin-top:0;} 
53. .mnu ul ul ul {margin-left:-150px;} 
54. .mnu ul ul ul.rgt {margin-left:0; margin-right:-150px;} 
55.  
56. .mnu ul li:hover > ul > li {margin-top:0; 
57. transition-delay: 0.5s; 
58. -o-transition-delay: 0.5s; 
59. -moz-transition-delay: 0.5s; 
60. -ms-transition-delay: 0.5s; 
61. -webkit-transition-delay: 0.5s; 
62. } 
63. .mnu ul ul li:hover > ul {margin-left:0; 
64. transition-delay: 0s; 
65. -o-transition-delay: 0s; 
66. -moz-transition-delay: 0s; 
67. -ms-transition-delay: 0s; 
68. -webkit-transition-delay: 0s; 
69. } 
70. .mnu ul ul li:hover > ul.rgt {margin-left:auto; margin-right:0; 
71. transition-delay: 0s; 
72. -o-transition-delay: 0s; 
73. -moz-transition-delay: 0s; 
74. -ms-transition-delay: 0s; 
75. -webkit-transition-delay: 0s; 
76. } 
77.  
78. .mnu ul li.close {margin-top:-30px; z-index:-1;} 
79. </style> 
80.  
81. <style media="only screen and (max-device-width:768px)" type="text/css"> 
82. /* for iPhone, iPod Touch and iPad */ 
83. .mnu ul li:hover + li.close {margin-top:-60px; z-index:0;} 
84. </style> 

Lalu untuk bagian menunya selengkapnya sbb:

1. <div class="mnu"> 
2.     <ul> 
3.         <li><a href="index.html">Home</a></li> 
4.     </ul> 
5.     <ul> 
6.         <li><a class="fly" href="#url">Contact Us</a> 
7.             <ul> 
8.                 <li><a href="index.html">Email</a></li> 
9.                 <li><a href="index.html">Telephone</a></li> 
10.                 <li><a href="index.html">Online Form</a></li> 
11.                 <li><a href="index.html">Snail Mail Address</a></li> 
12.             </ul> 
13.         </li> 
14.         <li class="close"><a href="#url">Close X</a></li> 
15.     </ul> 
16.     <ul> 
17.         <li><a class="fly" href="#url">Resort</a> 
18.             <ul> 
19.                 <li><a href="index.html">Ski Hire Facilities</a></li> 
20.                 <li><a class="fly" href="#url">Main Ski Slopes</a> 
21.                     <ul> 
22.                         <li class="p1"><a href="index.html">Beginners Slopes</a></li> 
23.                         <li><a href="index.html">Intermediate Slopes</a></li> 
24.                         <li><a class="fly" href="#url">Advanced Skills</a> 
25.                             <ul> 
26.                                 <li class="p1"><a href="index.html">Local</a></li> 
27.                                 <li><a href="index.html">Nearby</a></li> 
28.                                 <li><a href="index.html">With instructor</a></li> 
29.                                 <li><a href="index.html">Snow boarding</a></li> 
30.                             </ul> 
31.                         </li> 
32.                         <li><a href="index.html">Expert</a></li> 
33.                     </ul> 
34.                 </li> 
35.                 <li><a href="index.html">Night Life</a></li> 
36.                 <li><a class="fly" href="#url">Restaurants</a> 
37.                     <ul> 
38.                         <li class="p1"><a href="index.html">Snow Hotel</a></li> 
39.                         <li><a href="index.html">The Snowman</a></li> 
40.                         <li><a href="index.html">Ice Cavern</a></li> 
41.                         <li><a href="index.html">Ski Inn</a></li> 
42.                     </ul> 
43.                 </li> 
44.                 <li><a class="fly" href="#url">Car Hire</a> 
45.                     <ul> 
46.                         <li class="p1"><a href="index.html">From Airport</a></li> 
47.                         <li><a href="index.html">In Resort</a></li> 
48.                         <li><a href="index.html">Multiple Resorts</a></li> 
49.                     </ul> 
50.                 </li> 
51.             </ul> 
52.         </li> 
53.         <li class="close"><a href="#url">Close X</a></li> 
54.     </ul> 
55.     <ul> 
56.         <li><a class="fly" href="#url">Surrounding Area</a> 
57.             <ul> 
58.                 <li><a href="index.html">Where to go</a></li> 
59.                 <li><a href="index.html">What to do</a></li> 
60.                 <li><a href="index.html">Places of interest</a></li> 
61.                 <li><a href="index.html">Parks &amp; Museums</a></li> 
62.             </ul> 
63.         </li> 
64.         <li class="close"><a href="#url">Close X</a></li> 
65.     </ul> 
66.     <ul> 
67.         <li><a class="fly" href="#url">Information</a> 
68.             <ul> 
69.                 <li><a href="index.html">Money Exchange</a></li> 
70.                 <li><a class="fly" href="#url">Resort Information</a> 
71.                     <ul class="rgt"> 
72.                         <li class="p1"><a href="index.html">Lift Passes</a></li> 
73.                         <li><a href="index.html">Insurance</a></li> 
74.                         <li><a class="fly" href="#url">Gear Rental</a> 
75.                             <ul class="rgt"> 
76.                                 <li class="p1"><a href="index.html">Boots</a></li> 
77.                                 <li><a href="index.html">Skis</a></li> 
78.                                 <li><a href="index.html">Ski Wear</a></li> 
79.                                 <li><a href="index.html">Goggles</a><b></b></li> 
80.                             </ul> 
81.                         </li> 
82.                         <li><a href="index.html">Ski Schools</a></li> 
83.                         <li><a href="index.html">Snow Report</a></li> 
84.                     </ul> 
85.                 </li> 
86.                 <li><a class="fly" href="#url">Language</a> 
87.                     <ul class="rgt"> 
88.                         <li class="p1"><a href="index.html">Austrian</a></li> 
89.                         <li><a href="index.html">German</a></li> 
90.                         <li><a href="index.html">French</a></li> 
91.                         <li><a href="index.html">English</a><b></b></li> 
92.                     </ul> 
93.                 </li> 
94.                 <li><a href="index.html">Short Breaks</a></li> 
95.             </ul> 
96.         </li> 
97.         <li class="close"><a href="#url">Close X</a></li> 
98.     </ul> 
99. </div> 

Penggunaan code pada menu nya silahkan kalian sesuaikan dengan kebutuhan.
Baiklah,cukup sekian dulu arikel singkat ini, semoga bermanfaat
DEMO | DOWNLOAD