CSS: MegaMenu Dropdown

All About Komputer - Disini saya akan share sedikit tentang CSS , yuk di intip :D

bikin file megamenu.css yang isinya:

.megamenu{ list-style:none; width:100%; margin:0 auto 0 auto; height:35px; padding:0 20px; }

.megamenu li{ float:left; display:block; text-align:center; position:relative; padding:5px 15px; margin-right:1px; border:none; }

.megamenu li:hover{ background:#e9e9e9; background:-moz-linear-gradient(top,#B0A122,#CABB3B); background:-webkit-gradient(linear,0% 0,0% 100%,from(#B0A122),to(#CABB3B)); }

.pilih{ background:#e9e9e9; background:-moz-linear-gradient(top,#B0A122,#CABB3B); background:-webkit-gradient(linear,0% 0,0% 100%,from(#B0A122),to(#CABB3B)); }

.megamenu li a{ font-family:UbuntuRegular,Arial,Helvetica,sans-serif; font-size:16px; color:#4A0000; display:block; outline:0; text-decoration:none; text-shadow:1px 1px 1px #ccc; }

.megamenu li:hover a{ color:red; text-shadow:1px 1px 1px #fff; }

.megamenu li .drop{ padding-right:21px; background:url("img/drop .png") no-repeat right 8px; }

.megamenu li:hover .drop{ background:url("img/drop .png") no-repeat right 7px; }

.dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns{ margin:4px auto; float:left; position:absolute; left:-999em; text-align:left; padding:10px 5px 10px 5px; border-top:none; z-index:9999; background:#eee; background:-moz-linear-gradient(top,#CABB3B,#B0A122); background:-webkit-gradient(linear,0% 0,0% 100%,from(#CABB3B),to(#B0A122)); }

.dropdown_1column{ width:150px; }

.dropdown_2columns{ width:300px; }

.dropdown_3columns{ width:450px; }

.dropdown_4columns{ width:600px; }

.dropdown_5columns{ width:750px; }

.dropdown_3columns .promotions{ width:960px; margin-left:-445px; }

.megamenu li:hover .dropdown_1column, .megamenu li:hover .dropdown_2columns, .megamenu li:hover .dropdown_3columns, .megamenu li:hover .dropdown_4columns, .megamenu li:hover .dropdown_5columns{ left:-1px; top:auto; }

.col_1, .col_2, .col_3, .col_4, .col_5{ display:inline; float:left; position:relative; margin-left:5px; margin-right:5px; }

.col_1{ width:140px; }

.col_2{ width:280px; }

.col_3{ width:440px; }

.col_4{ width:590px; }

.col_5{ width:740px; }

.megamenu p, .megamenu h2, .megamenu h3, .megamenu ul li{ font-family:Arial,Helvetica,sans-serif; line-height:21px; font-size:12px; text-align:left; text-shadow:1px 1px 1px #FFF; }

.megamenu h2{ font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666; }

.megamenu h3{ font-size:16px; margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888; }

.megamenu p{ line-height:18px; margin:0 0 10px 0; }

.megamenu li:hover div a{ font-size:13px; color:black; line-height:20px; }

.megamenu li:hover div a:hover{ color:red; } .strong{ font-weight:bold; }

panggil sebelum </head>

<link rel="stylesheet" type="text/css" href="megamenu.css" media="screen, projection" />

contoh menu seperti ini:

<ul id=menu-holder>

<li id="home"><a href="home">Home</a></li>

<li id="gallery" ><a href="#">Gallery</a>

 <div>

  <div>

   <h3>Heavylift</h3>

   <a href="gallery-hlpo">Papua Operation</a>

   <a href="gallery-hlso">Southpole Operation</a>

   <a href="gallery-hlmo">Malaysia Operation</a>

  </div>

  <div>

   <h3>Aircraft Movement</h3>

   <a href="gallery-ambi">Biak</a>

   <a href="gallery-amff">Firefighting</a>

   <a href="gallery-amso">Southpole</a>

  </div>

  <div>

   <h3>Firefighting</h3>

   <a href="gallery-ffpb">Pekanbaru</a>

   <a href="gallery-ffpr">Palangkaraya</a>

  </div>

  <div>

   <h3>Aerofertilizing</h3>

   <a href="gallery-aero">Pekanbaru & Jambi 2010</a>

   <a href="gallery-siak">Riau 2011</a>

   <a href="gallery-rasau">Rasau 2011</a>

  </div>

  <div>

   <h3>Others</h3>

   <a href="gallery-dakota">Garuda Monument</a>

   <a href="gallery-caravan">Caravan Evacuation</a>

   <a href="galeri/South-Pole.pdf" target="_blank">ebook Start at the South Pole - A Logistics Challenge</a>

  </div>

 </div>

</li>

<li id="video" ><a href="#">Video</a>

 <div>

  <div>

   <h3>Aerofertilizing</h3>

   <a href="video-rijam">Pekanbaru & Jambi</a>

   <a href="video-siak">Riau</a>

   <a href="video-rasau">Rasau</a>

  </div>

 </div>

</li>

<li id="client" ><a href="client">Client</a></li>

<li id="about" ><a href="#">Service</a>

 <div>

  <div>

   <a href="private"><h3>Private Jets</h3></a>

   <a href="private-EL600">Embraer Legacy 600</a>

   <a href="private-F100EJ">Fokker F100</a>

   <a href="private-BJ135">Embraer BJ-135</a>

   <a href="private-RB390">Raytheon 390</a>

   <a href="private-E120">Embraer 120</a>

   <a href="private-BC1900">Beechcraft-1900</a>

   <a href="private-CGC">Cessna Grand Caravan</a>

  </div>

  <div>

   <h3>Helicopter</h3>

   <a href="heavylifting">Heavylifting</a>

   <a href="firefighting">Firefighting</a>

   <a href="aerofertilizing">Aerofertilizing</a>

  </div>

  <div>

   <a href="others"><h3>Others</h3></a>

   <a href="others">Livestock</a>

   <a href="others">Aeromedical</a>

   <a href="others">Search and Rescue</a>

  </div>

 </div>

</li>

<li id="about" ><a href="#">About</a>

 <div>

  <div>

   <h3>B M S</h3>

   <a href="about-ceo">From The C.E.O</a>

   <a href="about-us">About Us</a>

   <a href="about-contact">Contact Us</a>

   <a href="about-partnership">Partnership</a>

  </div>

 </div>

</li>

</ul>