Thursday 10 October 2013

Drop Down Multi Level Menu

Sekarang saya ingin berbagi dengan Anda. Lihat demo untuk melihat Mac-seperti multi-level menu dropdown yang saya buat menggunakan border-radius, box-shadow, dan text-shadow. Hal itu membuat sempurna di Firefox, Safari dan Chrome. Dropdown juga bekerja pada browser compitable non-CSS3 seperti IE7 +, tetapi sudut bulat dan bayangan tidak akan diberikan.


Ganti / Ubah Url serta tulisan yang seperlunya diganti dengan URL dan tulisan anda

HASIL MARKUP HTML :

 


<link rel="stylesheet" href="sumber.css" type="text/css"/>
<ul id="nav">
 <li class="current"><a href="http://trik-pemula.blogspot.com">Home</a></li>
 <li><a href="#">My Projects</a>
 <ul>
  <li><a href="http://trik-pemula.blogspot.com/search/label/css-menu">CSS Menu</a>
  <ul>
   <li><a href="http://trik-pemula.blogspot.com/2013/10/drop-down-menu.html">Drop Down Menu</a></li>
   <li><a href="http://www.ndesign-studio.com/wp-themes">Drop Down Menu Multi Level</a></li>
   <li><a href="http://trik-pemula.blogspot.com/2013/10/cool-animated-navigation-with-css-and.html">Cool Animated</a></li>
  </ul>
  </li>
  <li><a href="http://trik-pemula.blogspot.com/search/label/css-image">CSS-Image</a>
  <ul>
   <li><a href="http://trik-pemula.blogspot.com/2013/10/image-slide-in-captions.html">Image Slide In Captions</a></li>
  </ul>
  </li>
  <li><a href="http://trik-pemula.blogspot.com/search/label/css-basic">CSS-Basic</a></li>
 </ul>
 </li>
 <li><a href="#">Multi-Levels</a>
 <ul>
  <li><a href="#">Team</a>
  <ul>
   <li><a href="#">Sub-Level Item</a></li>
   <li><a href="#">Sub-Level Item</a>
   <ul>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
    <li><a href="#">Sub-Level Item</a></li>
   </ul>
   </li>
   <li><a href="#">Sub-Level Item</a></li>
  </ul>
  </li>
  <li><a href="#">Sales</a></li>
  <li><a href="#">Another Link</a></li>
  <li><a href="#">Department</a>
  <ul>
   <li><a href="#">Sub-Level Item</a></li>
   <li><a href="#">Sub-Level Item</a></li>
   <li><a href="#">Sub-Level Item</a></li>
  </ul>
  </li>
 </ul>
 </li>
 <li><a href="https://plus.google.com/109617849762706249664">Google +</a></li>
 <li><a href="http://facebook.com/ilandnurshidik">Contact Us on FB</a></li>
</ul>

STYLE CSS :

Langsung  sedot sumber.css open


DOWNLOAD | DEMO

1 comments:

Anonymous said...

makasih sob, jadi kepingin nyoba di blog ane nih :D
bgus widgetnya !

Keep posting gan.....

Post a Comment

◄ Newer Post Older Post ►