Home » All posts

Kamis, 06 September 2012

menu widget di blog

Catatan: Cukup ikuti langkah-langkah hati-hati, Semua Menu Navigasi bawah ini menggunakan dua potong codes.One adalah Kode HTML yang bertanggung jawab untuk posisi menu dan yang kedua adalah kode CSS yang bertanggung jawab untuk tampilan dan nuansa dari menus.Paste yang CSS kode untuk menu yang dipilih tepat di atas]]> </ b: skin> dan kode HTML Kembali ke Desain> elemen Halaman> Klik Tambah Gadget atau Tambah elemen Halaman> Pilih HTML / JavaScript widget> Paste sederhana kode HTML Anda dalam HTML / JavaScript widget dan Klik Simpan.


Here's the code 17+ Drop Down Menu




1. Massive Blue Drop Down menu 




HTML CODE:


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>




CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXdzZPjr0kvFiiq6Qi5x-IQlvA7tCPefCOI1yBhPRP6smSBUCV6N6GPPChjfiZijt1alfwRJPJrb9IPUUOyonJoEpu6gIb9cwOvSJwZNy-k5_tF5aaZ3UjxQK0qMyUkoLSKVKyWA_RKCB/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHwnG_fB7Ni1lXfLXX7MOQM7fZJKxi_331fMd2kGMbQfftryOr6fN7lnB2ATKoF89Qdtk2OnJUoi66YHOd3TBXg_LGJXOxPXGgt5JOrJlYYJcT6I2YPQqJp6iAF83WXreXdvbFCkg5LsG/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYia5HsX1EkG186msuRHgNIhlZmZUGyU0CyOOuoiLkcqNVo1p85ngbzAJtyewWwyvLf9hss7x7WZVh0JCr0VgaYMbtdXepRHdsa2GTTbmdfHb0qRjjc9rRI8cBbolg1m2gdsgnk99oN9i/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9em3bx56MBV6b1OZrP0U1f5oOPz5-bWH9FuMEByIz8ct4bS50MJ2aA5Tb9zBsbNiUshwAGdp5Snf7-_Bgs3_11ddEWpIK1fcT-NjuYphCWRrOcb0XeBWSFL0tR7MtpLTThV8CCJVRk_C/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}








2. Sunrise Gloss Drop Down Menus 






HTML CODE: 


<div class="nav-container-outer">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr6hEStLQY32e3tRdMywHtKiIQ_PZWOq0zhBBjCdMBjYwKHfqmQftOwLXO1P9Sn4sItpQxbz6YIrosWuOr1ikCNHfqlHCiUNyaRYoWw2l8eN13o8cSb4kluFbCh3U-urOrv8VqGLNoybI-/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5hjYSOvG0jKXPqXlIDqhZ8JngR_6Wuok8gP9gvgNFmbN7mUCFyCX_pjrgc0mqDU1yJN1jw-SUP667jvHcQvzf_P2QV9JCBlG52duds3tzA9rToHnyh96BXPkwOmNEepoCo4GgbDqocd3i/s1600/nav-bg-r.jpg" alt="" class="float-right" />

<ul id="nav-container" class="nav-container">

<li><a class="item-primary" href="#">HOME</a>

</li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Products</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Quality</a>



<ul style="width:150px;">

<li><a href="#">SoftwarePlus</a></li>

<li><a href="#">MagicDriver</a></li>

<li><a href="#">GreatFX</a></li>

<li><a href="#">SampleSoft</a></li>

<li><a href="#">UnDoIt</a></li>

<li><a href="#">100% CSS Menu</a></li>

<li><a href="#;">With Cross-Browser</a></li>

<li><a href="#;">Dropdowns</a></li>

<li><a href="#;">Absolutely NO Javascript</a></li>

<li><a href="#;">Being Used On</a></li>

<li><a href="#;">These Menus</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><a href="#;">Example Of a Divider</a></li>

<li><a href="#;">With No Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#">Services</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Very Long Item</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>



<li><span class="divider divider-vert" ></span></li>

<li><a class="item-primary" href="#;">Fully Flexible</a>



<ul style="width:150px;">

<li><span class="item-secondary-title" >Title For Links</span></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

<li><span class="divider divider-horiz" ></span></li>

<li><span class="item-secondary-title" >Title After Divider</span></li>

<li><a href="#">Once Again...</a></li>

<li><a href="#">These Links Still Appear</a></li>

<li><a href="#">Just Like The Others</a></li>

<li><a href="#">Even When Under A Title</a></li>

</ul></li>

<li class="clear">&nbsp;</li></ul>

</div>




CSS CODE:


@charset "utf-8";

/* CSS Document */



body{

padding: 25px;

}



/*^'^ Navigation Structure ^'^*/

.nav-container-outer{

background: #990000;

padding: 0px;

height: 74px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8XoCvtci_DphcKBIaQkVTZ9FDRyA55tTk-EuJ3-1okbbyBig6QA81ZjPO7KEaTxUJ-BFK91pddJoJooV5fzl2MLoczfq8xaWwS_9wRYpg95k52Oviq7xcxCf_Vu7No6NTY2sSsbVdmBaI/s1600/nav-bg.jpg);

}

.float-left{

float: left;

}

.float-right{

float: right;

}

.nav-container .divider{

display:block;

font-size:1px;

border-width:0px;

border-style:solid;

}

.nav-container .divider-vert{

float:left;

width:0px;

display: none;

}

.nav-container .item-secondary-title{

display:block;

cursor:default;

white-space:nowrap;

}

.clear{

font-size:1px;

height:0px;

width:0px;

clear:left;

line-height:0px;

display:block;

float:none;

}

.nav-container{

position:relative;

zoom:1;

margin: 0 auto;

}

.nav-container a, .nav-container li{

float:left;

display:block;

white-space:nowrap;

}

.nav-container div a, .nav-container ul a, .nav-container ul li{

float:none;

}

.nav-container ul{

left:-10000px;

position:absolute;

}

.nav-container, .nav-container ul{

list-style:none;

padding:0px;

margin:0px;

}

.nav-container li a{

float:none

}

.nav-container li{

position:relative;

}

.nav-container ul{

z-index:10;

}

.nav-container ul ul{

z-index:20;

}

.nav-container ul ul ul{

z-index:30;

}

.nav-container ul ul ul ul{

z-index:40;

}

.nav-container ul ul ul ul ul{

z-index:50;

}

li:hover>ul{

left:auto;

}

#nav-container ul {

top:100%;

}

#nav-container ul li:hover>ul{

top:0px;

left:100%;

}



/*^'^ Primary Items ^'^*/

#nav-container a{

padding:7px 17px 7px 18px;

margin: 10px 0px 0px 0px;

color: #FFFFFF;

font-family: Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:14px;

text-decoration:none;

font-weight: bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFq0CASdwmnUXnqnlwYF5mSAO8-P28RhvpF1lXHCPDWlk3Lmf1QPKHIbfTnzYXJReA6n-3sQ-MCkCQzYLiWBQEg8EaTuV-Tfl5fjFkVC9fZAV95_Cdt4ZHn53P0vWVvGmmfIWdqz3fxNS/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: top;

}



#nav-container a:hover{

color: #6C3600;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZFq0CASdwmnUXnqnlwYF5mSAO8-P28RhvpF1lXHCPDWlk3Lmf1QPKHIbfTnzYXJReA6n-3sQ-MCkCQzYLiWBQEg8EaTuV-Tfl5fjFkVC9fZAV95_Cdt4ZHn53P0vWVvGmmfIWdqz3fxNS/s1600/item-primary-bg.gif);

background-repeat: no-repeat;

background-position: center;

}



/*^'^ Secondary Items Container ^'^*/

#nav-container div, #nav-container ul{

padding:10px 4px 10px 4px;

margin:0px 0px 0px 0px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit5d2ZUEGvaXGn0VSDAEHCTQVES8TMYMf-MFDTiqs56-x-N7h1UjKXNZJIxoskbjST6oja60-wh3f5pkoQqXRmpr5ByG_xo-lsfeGoqPFpcQkq8_fq4HUsejSoNibdjJdQQtzo7VTbAXGb/s1600/item-secondary-container-bg.jpg);

background-repeat: repeat-x;

background-color: #FF9900;

border-bottom: 1px solid #CA6500;

}



/*^'^ Secondary Items ^'^*/

#nav-container div a, #nav-container ul a{

padding:3px 10px 3px 6px;

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jM30o8g0tX_79Sny0YEICUXZSFIwEsdFhA-F_L1Gc_KC4-u5qNoetHlCygLk9CFKSrveLugACII0cL1Ba-Kl5hJwN_xa3uCrq8xAWfv9mW2UbO1JPw1XL8PHo5YTP1rxg_uviRs_diOB/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

background-position: 0px 22px;

font-size:11px;

border-width:0px;

border-style:none;

margin: 0px 0px 0px 0px;

width: 149px;

}



/*^'^ Secondary Items Hover State ^'^*/

#nav-container div a:hover, #nav-container ul a:hover{

background-color: #FFFFFF;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jM30o8g0tX_79Sny0YEICUXZSFIwEsdFhA-F_L1Gc_KC4-u5qNoetHlCygLk9CFKSrveLugACII0cL1Ba-Kl5hJwN_xa3uCrq8xAWfv9mW2UbO1JPw1XL8PHo5YTP1rxg_uviRs_diOB/s1600/item-secondary-bg.jpg);

background-repeat: no-repeat;

color:#CC0000;

}



/*^'^ Secondary Item Titles ^'^*/

#nav-container .item-secondary-title{

cursor:default;

padding:4px 0px 3px 7px;

color: #6C3600;

font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;

font-size:11px;

/* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnbOo5gQV8OHeF6d23qeQETf7FBUlaZSE7GWHBUSTxMzjutYBTFWipjXgRD4FYIzBH3BxLSL_o6JD612REJb78MIY0WngYfImQ55s43kjEQfn23eK5PkLrGDukwUZEGfI4GYwDEAzKvUC4/s1600/item-secondary-title-bg.jpg); */

background-repeat: no-repeat;

font-weight:bold;

}



/*^'^ Horizontal Dividers ^'^*/

#nav-container .divider-horiz{

border-top-width:1px;

margin:5px 5px;

border-color: #C16100;

}



/*^'^ Vertical Dividers ^'^*/

#nav-container .divider-vert{

border-left-width:1px;

height:15px;

margin:4px 2px 0px 2px;

border-color:#AAAAAA;

}










3. Blue Dawn Drop Down 




HTML CODE: 


<div class="wrapper1">

<div class="wrapper">

<div class="nav-wrapper">

<div class="nav-left"></div>

<div class="nav">

<ul id="navigation">

<li class="active">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Home</span>

<span class="menu-right"></span>

</a>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Blog</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Archives</a>

</li>

<li>

<a href="#">Categories</a>

</li>

<li>

<a href="#">Top-rated Posts</a>

</li>

<li>

<a href="#">Most-viewed Entries</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Development</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Wordpress Themes</a>

</li>

<li>

<a href="#">Wordpress Plugins</a>

</li>

<li>

<a href="#">Mac OS X</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Tutorials</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Photoshop</a>

</li>

<li>

<a href="#">Illustrator</a>

</li>

<li>

<a href="#">Css, Html</a>

</li>

<li>

<a href="#">Post Your Tutorial!</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Gallery</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">Personal Photos</a>

</li>

<li>

<a href="#">My Friends</a>

</li>

<li>

<a href="#">Tech</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="">

<a href="#">

<span class="menu-left"></span>

<span class="menu-mid">Portfolio</span>

<span class="menu-right"></span>

</a>

<div class="sub">

<ul>

<li>

<a href="#">My Works</a>

</li>

</ul>

<div class="btm-bg"></div>

</div>

</li>

<li class="last">

<a href="">

<span class="menu-left"></span>

<span class="menu-mid">Contact</span>

<span class="menu-right"></span>

</a>

</li>

</ul>

</div>

<div class="nav-right"></div>

</div>

<div class="content">

<p>&nbsp;</p>

<p>&nbsp;</p>



</div>

<div class="content-bottom"></div>

</div>

</div>





CSS CODE:


.wrapper1{

color: #44433f;

font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;

margin: 0;

padding: 4px 0 0;

}

.wrapper1 a{

color: #E5F2FB;

text-decoration: none;

}

.wrapper1 a:hover {

color: #09548B;

}

.wrapper1 p {

margin: 0 0 17px;

padding: 0;

line-height: 18px;

}

.wrapper {

/*width: 710px;*/

margin: 20px auto;

}

.nav {

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYg4KY8f7KwzAKFQNin1Dhd8-bxZ-iDNvz5xGmJNVoKT0zIamPKSsln00sC3icHrJHizXfCf0FMdn68W_15fROxC1KdVV-szPU8p4xHGjTM_SONfNze63GKG8KBIc0zV64e1-1bdLl_Ctl/s1600/nav_bg.png) repeat-x;

float: left;

}

.nev-wrapper {

clear: both;

float: left;

}

.nav-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyZk5zFqqzg-RW923Di3NwW2K_QyOni3ElkT1yVH8uBhhD_lXnMRW1bQoLZlkKsxnVTOr_9nBS8Lfx_VtnMTkyzu65eW-pNBlU-bhH96XQ16ELmXWdQiEY_M8U-6mGBv6pT7e0h1dFJNwa/s1600/nav_left.png) no-repeat top left;

float: left;

width: 11px;

height: 41px;

}

.nav-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBaqGPYxLsdBy1h0oyHjAYR3jdw_bq_NFOfDHDpUdB_oG4SlptOxVa-WFsFskny6vpuJQYwHMkOULYucSBtcJkDctiO9oiRPLAzudueI2fyBc3-5UkrYisaRQksjG1x5XQbR01dAG0r24/s1600/nav_right.png) no-repeat top right;

float: left;

width: 11px;

height: 41px;

}

.nav ul {

/*width: 648px;*/

height: 38px;

float: left;

margin: 0;

padding-top: 3px;

list-style: none;

font-size: 15px;

}

.nav li {

float: left;

padding: 0 7px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6FLn-HQtl2nvmFGP_z4lfQLPF28n8KxC_HrKwou6wI7pstFN29Ib0CkSDBwIBMm_payMp20YiIluZg30A3K6p60AYtdhzf6QdCsdvTXWFccZvzhTXqXRLs9BttVeB057mx0d82ilpb9bQ/s1600/split.png) no-repeat right center;

position: relative;

z-index: 1;

}

.nav li.last {

background:none;

}

.nav li:hover {

z-index:2;

}

.nav li a {

display: block;

line-height: 38px;

overflow: hidden;

float: left;

}

a .menu-left {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX6uxN2HDhjn85lX_f-c2BwWks7tjNKwumTY1w7iKd6Ucc1KQF8lh-3if2RjhSWXCAFwZbZNBcux-Wb4pSiU5MFCT5nbOK6nQTPvfhzk8KHPCL17XrUppcpaLRIRYcLeu-c5oMqsb7VpeA/s1600/menu_left.gif) no-repeat left top;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-mid {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSXkeX5l2wPxVeH7Mtl47XOLRrWDP0R7Dt0hbxrvc3HhO7BUX-qEiiB4Prp-Cdf7cmOhhmv03uQGpcFhS5dgSfFUDYRgT6IziRq_DbZCQSyzn5_CRW7S0uieT-ryZTdbX4kts0BBxq1qsp/s1600/menu_mid.gif) repeat-x top left;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

a .menu-right {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_KOyUZzxqAgjQH5WM1rgriJYft5teMfE_hgGjX8jtj4k6dPtDUad6ByMpEh6LvepvBBPr0AqwH9AWhyphenhyphenDCxqs3QxvN7Ej0k9bjne22nqkgynu6-DdXK8NEK8jJRfvSJY6PWd58lapdZkeb/s1600/menu_right.gif) no-repeat top left;

width: 8px;

height: 32px;

line-height: 35px;

display: block;

float: left;

}

.nav li a:hover .menu-left,

.nav li.active a .menu-left,

.nav li:hover a .menu-left,

.nav li a:hover .menu-mid,

.nav li.active a .menu-mid,

.nav li:hover a .menu-mid,

.nav li a:hover .menu-right,

.nav li.active a .menu-right,

.nav li:hover a .menu-right {

background-position: 0 -37px;

line-height: 35px;

}

.nav li a:hover,

.nav li.active a,

.nav li.hover a,

.nav li:hover a {

color: #09548B;

}

.nav li:hover .sub,

.nav li.hover .sub {

display:block;

}

.nav li .sub {

display: none;

position: absolute;

top: 27px;

left: 6px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU0bZY1HPLh__MUn1vtlesckIUcy7DC7bPBvKUNPDn19vK5qp2Ir6WD4jJ1_b5d6UExYnZvMYzZq_oT8NWm3Z1fwMa1Z5aBwj7LAn2Vw9vPIrbHZTU69X3Oi3VgZmGoP-csyxp3HtIbLyv/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bMhvc1nQDKS-wIiAPAz99rFbeBK1O-scjs84g-MVPaRvyEPGLxzzukT7AdoXiKwT-APhyphenhyphenh1JqKEhyphenhyphenHljBB1TxHEe1Zc5KvIutnd2WTt4_J5C0nfYnQw0I-8ODdgqbR89ld42TjS22m7U/s1600/submenu_bg.png) repeat-y;

width: 162px;

height: auto;

margin: 0;

padding: 0 12px 10px;

list-style: none;

font-size: 14px;

}



.nav li:hover li,

.nav li.active li {

width: 100%;

padding: 1px 0 2px;

border-bottom: 1px #C1D9F0 dashed;

background: none !important;

}

.nav li:hover li a,

.nav li.active li a {

color: #09548B;

background: none !important;

line-height: normal;

width: 156px;

padding: 8px 3px 3px;

text-indent: 1px;

}

.nav li:hover li a:hover,

.nav li.active li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/*IE*/

.nav li li a:hover,

.nav li li a:hover {

color: #fff;

background: #165B9F !important;

text-decoration: none;

line-height: normal;

}

/**/

.nav .btm-bg {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5vsg-RwxT3nH-Zeb6SqdmNOT-OJmeE1hj3w6ctHSp78agq_1i451TIyPzdx0jbXHOddbsEhxLF1UXePiwuQT0OFdl7qwJz9-CN-rVYMgc7jnzkEPCx35YFAWKyQBPu7kjI1C8FhYfKtOD/s1600/submenu_bottom.png) no-repeat;

width: 205px;

height: 9px;

overflow: hidden;

clear: both;

}

.content {

width: 670px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8_9LByyUwxX3taDGVFcKzClMJ5HtsF5KbXzGBCgq3DIj416JZkROAigHbRuZamFW4L3Vm-9yVixwqO4UrNO5aqJqC-3UBvigjSt2m_jxDJ9zwAwFPS88y8l4y2AKPOXEcE9ltEw5SclPy/s1600/content_bg.png) repeat-y;

float: left;

padding: 10px 20px;

}

.content h1 {

color: #333;

font-weight: 400;

text-transform: uppercase;

font-size: 18px;

border-bottom: 1px dashed #C1D9F0;

}

.content h2 {

font-weight: 400;

text-transform: uppercase;

font-size: 14px;

padding-left: 10px;

margin-bottom: -5px;

}

.content p {

padding: 0 15px;

text-align: justify;

}

.content-bottom {

width: 710px;

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEK397OYZ-plOJZBP9sBDqjLSEm2ZDrAz5kncfm82dRv80D8JJQCY1vNRGyA5DvVsszml67c69DEJNccZzi9BliD9J4IC5k9RrnRBw35NtVhEMED_QV3BwJ4v9R-VFvkmeUZKnWhtIFzqF/s1600/content_bottom.png) no-repeat;

height: 13px;

float: left;

}








4. Blue Center Drop Bar 






HTML CODE: 


<div class="nav">

<div class="table">



<ul class="select"><li><a href="#"><b>Sample</b></a></li></ul>



<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</div>

</li>

</ul>



<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

<li><a href="#">Sample Menu 2</a></li>

</ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

<li><a href="#">Sample Menu 3</a></li>

</ul>

</div>

</li>

</ul>





<ul class="select"><li><a href="#"><b>Sample Menu</b></a>

<div class="select_sub">

<ul class="sub">

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

<li><a href="#">Sample Menu 4</a></li>

</ul>

</div>

</li>

</ul>



</div>

</div>



<br />






CSS CODE:


.nav {

height:35px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNX5PTNDZD36t2SNUnzu7KyFhlFGcy4mQPryRFwnBM-2IXwGJUuQfR3HLe1yyCt5qJ9SBLWexQTNkjSpDqUXtvA2abMTxCYMmaWYjHPA_i9AQEKjtciZZRnFb2TCPYCyI7guC4S5h6SX_I/s1600/bg.gif) repeat-x;

position:relative;

font-family:arial, verdana, sans-serif;

font-size:11px;

width:100%;

z-index:100;

margin:0;

padding:0;

}



.nav .table {

display:table;

margin:0 auto;

}



.nav .select,

.nav .current {

margin:0;

padding:0;

list-style:none;

display:table-cell;

white-space:nowrap;

}



.nav li {

margin:0;

padding:0;

height:auto;

float:left;

}



.nav .select a {

display:block;

height:35px;

float:left;

font-weight:bold;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNX5PTNDZD36t2SNUnzu7KyFhlFGcy4mQPryRFwnBM-2IXwGJUuQfR3HLe1yyCt5qJ9SBLWexQTNkjSpDqUXtvA2abMTxCYMmaWYjHPA_i9AQEKjtciZZRnFb2TCPYCyI7guC4S5h6SX_I/s1600/bg.gif);

padding:0 30px 0 30px;

text-decoration:none;

line-height:35px;

white-space:nowrap;

color:#2b3238;

}





.nav .select a:hover,

.nav .select li:hover a {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKsRyLcXT6dhxXkmE3mBJnZQ7oK4xvERbl1_hek6CkOLcdL0hQ460px5KsFam3_3GgcevvfccZnotk0e828LujHz5VsQ_VhOK_C3W8Jv9ewBvqOmQQ1WSdVHfpzDbtGjxCrFbqAhn_ogc/s1600/hover.gif);

padding:0 0 0 15px;

cursor:pointer;

color:#2b3238;

}



.nav .select a b{

font-weight:bold;

}



.nav .select a:hover b,

.nav .select li:hover a b {

display:block;

float:left;

padding:0 30px 0 15px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSKsRyLcXT6dhxXkmE3mBJnZQ7oK4xvERbl1_hek6CkOLcdL0hQ460px5KsFam3_3GgcevvfccZnotk0e828LujHz5VsQ_VhOK_C3W8Jv9ewBvqOmQQ1WSdVHfpzDbtGjxCrFbqAhn_ogc/s1600/hover.gif) right top;

cursor:pointer;

}



.nav .select_sub {

display:none;

}



/* IE6 only */

.nav table {

border-collapse:collapse;

margin:-1px;

font-size:1em;

width:0;

height:0;

}



.nav .sub {

display:table;

margin:0 auto;

padding:0;

list-style:none;

}



.nav .sub_active .current_sub a,

.nav .sub_active a:hover {

background:transparent;

color:#2b3238;

}



.nav .select :hover .select_sub,

.nav .current .show {

display:block;

position:absolute;

width:100%;

top:35px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDuYxgjMDS6o_paDfx_VJ-Y7eaz3MJnhz_LuX7qW-1tH8Sbka5Can2-nZfTR6Q_FWRQXTNB5ve3oRAKSk4IVJZr1f1S991BVN35sG-RUEjwYPE_ylHX6mxMng2jfOwZ9bqgp3FKQzveFQ9/s1600/back.gif);

padding:0;

z-index:100;

left:0;

text-align:center;

}



.nav .current .show {

z-index:10;

}



.nav .select :hover .sub li a,

.nav .current .show .sub li a {

display:block;

float:left;

background:transparent;

padding:0 10px 0 10px;

margin:0;

white-space:nowrap;

border:0;

color:#2b3238;

}



.nav .current .sub li.sub_show a {

color:#2b3238;

cursor:default;

}



.nav .select .sub li a {

font-weight:normal;

}



.nav .select :hover .sub li a:hover,

.nav .current .sub li a:hover {

visibility:visible;

color:#73a0d2;

}








5. Blue Impression Drop Down Menu 








HTML CODE: 


<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>





CSS CODE:


.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxilddtHbu_yYy6KwO3qvGkgoU7A67qeb2_S3DMczVl0Hc1oeceNVe_B_JyOqjH6omFbqzMKiOkyftbtS6AXDsIOVkn7uVQ1omVBLbt6mf__oauYoVyrQo2aTuDaFbE0qhwzCPi3AHS0h/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOGdJyvUKM0XedaJZumLCEh8XZYUDZK0MI9wFJn_iPxnRw2AGWB1qy6GuN-Y2vcXVfb0XKHCiYsoa7L9N4QWlsNjWNF2Fidw7tCcsibUrQtm81by6qqUdZAaWM7bOOdV1dHbFwyU5JLC4a/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNVnH3PuXi7ExvMcX0WOpfkp8MVcpvp2A3na1v0-kUYXErXsNDSr5lkrJgmM76y8b5Y08PT_brBdmJBIch8_hwHsj7ZBZ1uKrAG47i4fCKzqhJphTiYUnoEYM-euqgjsEjap1zPBFr5r0J/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxilddtHbu_yYy6KwO3qvGkgoU7A67qeb2_S3DMczVl0Hc1oeceNVe_B_JyOqjH6omFbqzMKiOkyftbtS6AXDsIOVkn7uVQ1omVBLbt6mf__oauYoVyrQo2aTuDaFbE0qhwzCPi3AHS0h/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxilddtHbu_yYy6KwO3qvGkgoU7A67qeb2_S3DMczVl0Hc1oeceNVe_B_JyOqjH6omFbqzMKiOkyftbtS6AXDsIOVkn7uVQ1omVBLbt6mf__oauYoVyrQo2aTuDaFbE0qhwzCPi3AHS0h/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuwSGAJ-PPDtWXes2JfmYXwkQY7DB3EXtEWcfdxVHr4S92mydqVC-f0PYZfEpwMT4IJPsmLyyglgcRRrMLd2zegwfJLoeweIoPcmPOo2f3lre2rnOhk4DaFJ7oTVp6qUWLU6THmTAhYwOa/s1600/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxilddtHbu_yYy6KwO3qvGkgoU7A67qeb2_S3DMczVl0Hc1oeceNVe_B_JyOqjH6omFbqzMKiOkyftbtS6AXDsIOVkn7uVQ1omVBLbt6mf__oauYoVyrQo2aTuDaFbE0qhwzCPi3AHS0h/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxilddtHbu_yYy6KwO3qvGkgoU7A67qeb2_S3DMczVl0Hc1oeceNVe_B_JyOqjH6omFbqzMKiOkyftbtS6AXDsIOVkn7uVQ1omVBLbt6mf__oauYoVyrQo2aTuDaFbE0qhwzCPi3AHS0h/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuwSGAJ-PPDtWXes2JfmYXwkQY7DB3EXtEWcfdxVHr4S92mydqVC-f0PYZfEpwMT4IJPsmLyyglgcRRrMLd2zegwfJLoeweIoPcmPOo2f3lre2rnOhk4DaFJ7oTVp6qUWLU6THmTAhYwOa/s1600/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul,

.menu :hover ul ul,

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #95d2ee; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq4XDPGvZ1L5euV2Co53-Xws-ETdtYWg0xji7poebCA2DzJLuIaTs3lXf2TbIJWpEXzANh0Hy5OFgslyEqs_LYVBUsGLkoyqP_pQaiAXFT5iZanUpWmOMNEkDm6b4tpTW8YVo_qcf1xeb_/s1600/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#95d2ee; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#95d2ee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRn-xB8uimiDiOeRBC7A5YCQFsC7oWGUCly-tAz_1lrCs38unYROJcmberHec8-IfiLy2RbGE9ApUs2FxZgnP9otyezGdXUF-SDQkDUfkLqpqvosB1exmxGSmDNlud4LyFWPV0kzB8ilv/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#95d2ee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRn-xB8uimiDiOeRBC7A5YCQFsC7oWGUCly-tAz_1lrCs38unYROJcmberHec8-IfiLy2RbGE9ApUs2FxZgnP9otyezGdXUF-SDQkDUfkLqpqvosB1exmxGSmDNlud4LyFWPV0kzB8ilv/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}






6. Green Impression Drop Down Menu 




HTML CODE: 


<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>





CSS CODE:


.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7P42jdCLlnJWGkmbRdUbj7tXoWm9M1d8uUNJWGMnaL_mn53eliGR4uW5eucED5Zlrr4N4sSiw4bpRT1X_bH3j2hkbaNQqI2lewY-sn5nSCqd-HLq9IJn3o4LzB6cT61f1SN1rC1Gr7p3a/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9w2uMI2aiBOj_RrpIYJBV314q4yTJ57u4otr3dNVusCXXTGWnzjLvj1MyiT5iEYApj21fqrh_tujlvtQN5Wp7YBr0kqhjHN4IY5OEez1RQ9fTJM69Tp6p2OXfKxw0myXyp6XmA63cAPdP/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF4P0FyI_eW6-ogEL3MEV7WpKKcwHZGVaj_MiPMWr_9pNW63qk4z7Vm5Visbzht4iXUGvgf59-K3WVdyvY1aQFQLnoBo4ECVKSZMxctBFyGKR1elMqvQT4ySgX-tzpuctABMNiB2SN69TR/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7P42jdCLlnJWGkmbRdUbj7tXoWm9M1d8uUNJWGMnaL_mn53eliGR4uW5eucED5Zlrr4N4sSiw4bpRT1X_bH3j2hkbaNQqI2lewY-sn5nSCqd-HLq9IJn3o4LzB6cT61f1SN1rC1Gr7p3a/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7P42jdCLlnJWGkmbRdUbj7tXoWm9M1d8uUNJWGMnaL_mn53eliGR4uW5eucED5Zlrr4N4sSiw4bpRT1X_bH3j2hkbaNQqI2lewY-sn5nSCqd-HLq9IJn3o4LzB6cT61f1SN1rC1Gr7p3a/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi589GmtHjtwoScX4wCcseDtkdlZ4OReljZLo3uvNMMcIBNGgSHRu7f2-LA277tXE9-plElt6AuydWgPfRCJvdAXO3xf-K6dd9oJe_fi16ksTMfcTqGIS4FduvNQt41DLz8Ml-6T772daBe/s1600/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7P42jdCLlnJWGkmbRdUbj7tXoWm9M1d8uUNJWGMnaL_mn53eliGR4uW5eucED5Zlrr4N4sSiw4bpRT1X_bH3j2hkbaNQqI2lewY-sn5nSCqd-HLq9IJn3o4LzB6cT61f1SN1rC1Gr7p3a/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7P42jdCLlnJWGkmbRdUbj7tXoWm9M1d8uUNJWGMnaL_mn53eliGR4uW5eucED5Zlrr4N4sSiw4bpRT1X_bH3j2hkbaNQqI2lewY-sn5nSCqd-HLq9IJn3o4LzB6cT61f1SN1rC1Gr7p3a/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi589GmtHjtwoScX4wCcseDtkdlZ4OReljZLo3uvNMMcIBNGgSHRu7f2-LA277tXE9-plElt6AuydWgPfRCJvdAXO3xf-K6dd9oJe_fi16ksTMfcTqGIS4FduvNQt41DLz8Ml-6T772daBe/s1600/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul,

.menu :hover ul ul,

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #009900; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAuWwll09amCBsXfgwsrFbMV6rKFFZSprf-TQ7D3vjzA53wdMLoJzmjOfov570aExLChsu5yRHiNiwZ1PuR79arWQuazjlfBpsCt4y9L6W4ciDpo5UgPGyDPC_ZhSlpPjhXVA2XCOe2y3/s1600/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#42c555; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y2Nx4tNxEqm4BGMzhYrrIT5Cs7KF-jX2zLb6a5Kdv7LpmCrX7bRoC-dXj7H8TPI4rk8mkvPc0RXJmTJJHP185ruNi_pUIXGmMXjcWeLdAq3dgFYMHKTj2Vna2VUWKMTBYQzSiZiZZL7O/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#42c555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y2Nx4tNxEqm4BGMzhYrrIT5Cs7KF-jX2zLb6a5Kdv7LpmCrX7bRoC-dXj7H8TPI4rk8mkvPc0RXJmTJJHP185ruNi_pUIXGmMXjcWeLdAq3dgFYMHKTj2Vna2VUWKMTBYQzSiZiZZL7O/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 95d2ee; white-space:nowrap; width:93px; z-index:200; height:auto;}








7. Grey Impression Drop Down Menu 






HTML CODE: 


<ul class="menu">

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu This is some longer text</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a>

<ul class="sub">

<li><a href="#">Sample Menu This is some longer text</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

<li><a href="#">Sample Menu</a></li>

</ul>

</li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

<li class="top"><a href="#" class="top_link"><span>Sample Menu</span></a></li>

</ul>





CSS CODE:


.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOut6VKrqB3X0KuaMpPwk2ASXRmn6JH4y181tYr06rd5TYUQ3aPi4WWsBGWV05rF6dvypjeFz1T5pU5xZQf2Ond0twwwoDXi1oviKAweGeSxZ2wMgjyne4TapWGJ8oi6Hs5I0z0-0qUXk/s1600/button4.gif);}

.menu {padding:0 0 0 32px; margin:0; list-style:none; height:40px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3pSLpueb4yiWfGAMjmOnzvulzPHCgK3wtNzXMRLrRQIf_4GbJlgHdZJRBmFwl32SbpO0-TGN9IGBOIozkvhYWBRDkPdJnSS0b_gp1Y3_s3GjffGbhJVeDT4gg_yL10Zqq7XBaB4bBD-YS/s1600/button1a.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; }

.menu li.top {display:block; float:left; position:relative;}

.menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#bbb; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}

.menu li a.top_link span {float:left; font-weight:bold; display:block; padding:0 24px 0 12px; height:40px;}

.menu li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:40px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfAjeXkNAk501bj6-30s1cfpO_lThcgd6lWr_kCtxS-Te2azq-l7bEMrHV9GPUVDal3WlnaJH77Nb1kbcNmAQX0gQR8YFWSXgQBAKrVun1G2KK0aD9D_rQdIaRQt2c_OpPELc0Vb2_Urp8/s1600/down.gif) no-repeat right top;}

.menu li a.top_link:hover {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOut6VKrqB3X0KuaMpPwk2ASXRmn6JH4y181tYr06rd5TYUQ3aPi4WWsBGWV05rF6dvypjeFz1T5pU5xZQf2Ond0twwwoDXi1oviKAweGeSxZ2wMgjyne4TapWGJ8oi6Hs5I0z0-0qUXk/s1600/button4.gif) no-repeat;}

.menu li a.top_link:hover span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOut6VKrqB3X0KuaMpPwk2ASXRmn6JH4y181tYr06rd5TYUQ3aPi4WWsBGWV05rF6dvypjeFz1T5pU5xZQf2Ond0twwwoDXi1oviKAweGeSxZ2wMgjyne4TapWGJ8oi6Hs5I0z0-0qUXk/s1600/button4.gif) no-repeat right top;}

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheWfALF_qILUp-eE-GawWXMD2ka891S_aLYvGcLYWuN4tvkZ3orOa3oePbwqyv3sCUcFxeXZCs8tNsBXtk600Is1x1eYXC6z1JkIf7g6QYAlhxKLPE_syaBN-fmcg5vuSh3CNgKWnOlFmj/s1600/button4a.gif) no-repeat right top;}



.menu li:hover > a.top_link {color:#000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOut6VKrqB3X0KuaMpPwk2ASXRmn6JH4y181tYr06rd5TYUQ3aPi4WWsBGWV05rF6dvypjeFz1T5pU5xZQf2Ond0twwwoDXi1oviKAweGeSxZ2wMgjyne4TapWGJ8oi6Hs5I0z0-0qUXk/s1600/button4.gif) no-repeat;}

.menu li:hover > a.top_link span {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggOut6VKrqB3X0KuaMpPwk2ASXRmn6JH4y181tYr06rd5TYUQ3aPi4WWsBGWV05rF6dvypjeFz1T5pU5xZQf2Ond0twwwoDXi1oviKAweGeSxZ2wMgjyne4TapWGJ8oi6Hs5I0z0-0qUXk/s1600/button4.gif) no-repeat right top;}

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheWfALF_qILUp-eE-GawWXMD2ka891S_aLYvGcLYWuN4tvkZ3orOa3oePbwqyv3sCUcFxeXZCs8tNsBXtk600Is1x1eYXC6z1JkIf7g6QYAlhxKLPE_syaBN-fmcg5vuSh3CNgKWnOlFmj/s1600/button4a.gif) no-repeat right top;}



.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}



.menu a:hover {visibility:visible;}

.menu li:hover {position:relative; z-index:200;}



.menu ul,

.menu :hover ul ul,

.menu :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul ul,

.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}



.menu :hover ul.sub {left:2px; top:40px; right:2px; background: #fff; padding:3px 0; border:1px solid #999999; white-space:nowrap; width:200px; height:auto;}

.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:250px;}

.menu :hover ul.sub li a {font-weight:normal;display:block; font-size:11px; height:20px; width:192px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; border:3px solid #fff; border-width:0 0 0 3px;}

.menu :hover ul.sub li a.fly {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNIK4FTui60mgkvlPmYISUAiqeYVIpgiGmlrqHVQ6HliCe4QSF_oNnZ_EM_gFRNn9okUDH8NqeZgmAU7cLyJ9ruUbOOU4IqhY12KNjl0JDnnb_gr09_e81L1uVz-hpaGILexrLP9xjKHFO/s1600/arrow.gif) 80px 7px no-repeat;}

.menu :hover ul.sub li a:hover {background:#999999; color:#fff;}

.menu :hover ul.sub li a.fly:hover {background:#999999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyOUOW-Szj0JcWqZ7uaOHSTNdvPh2Jd3QLO11irb8-tV6KMiWkt391HywF_j0FhfTzVkhDrqjfxxVaqQWPQutVyPEoWm2g2u7I8ynCQArg9SxmGjG0OPmvImqK9Tdwe52XyFMkwdRKzUO/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}

.menu :hover ul li:hover > a.fly {background:#999999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIyOUOW-Szj0JcWqZ7uaOHSTNdvPh2Jd3QLO11irb8-tV6KMiWkt391HywF_j0FhfTzVkhDrqjfxxVaqQWPQutVyPEoWm2g2u7I8ynCQArg9SxmGjG0OPmvImqK9Tdwe52XyFMkwdRKzUO/s1600/arrow_over.gif) 80px 7px no-repeat; color:#fff;}



.menu :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul,

.menu :hover ul :hover ul :hover ul :hover ul :hover ul

{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid 999999; white-space:nowrap; width:93px; z-index:200; height:auto;}








8. Blue Tabbed Drop Down 




HTML CODE: 


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>




CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjye8BGtACprDPtcm_P7bqwWNe6_RqK8yFY7sQ2dsv7jowcvb_m4SecO0hH86HADNslQew80rK4Lp8RdiCB5GsdQvXmnyxFu_rYt3KmT05lixJnRS-hgaXzY9kp2tlRT2WRhPq9khZkt4t5/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiALRa79c8kKE_QuXh-tj0LhQ1uZgu6UTIVWNqtT4eN_j1CeHm32mvt0vwngW9pwZ8CVj0vy857vcsD2fJiavWt-Jf8Urh65S7MHd8M0JtR830Yr5JXi0IBCWWvn87wScuIci93cPdh-1g/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}






9. Yellow Tabbed Drop Down Menu 






HTML CODE: 


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>






CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu-ALrdWpTrvRDWCdP0XBqPl-YZTZTJxwlhZA3Yfi_VOodPINfPUKLdBUWRWFOcbuq8bzSzpo2J0YADrsPT_6T_aqyi4b9olPpa5EMctLWZkJJ3WRsnZF32Hl-LhPBcSZHUrO3pe_yafi5/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #0079b2;

border-right:2px solid #0079b2;

border-bottom:2px solid #0079b2;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-uwt4UTlh9kzoc7B6Jvz-s47BCHp7gLaUU0eSuHCK1ZLAtPIe1FlLNbVNENCP_7Rg8zv4Hm0jtxkwXhz-JecgKoidd9DLRkYcfRYzLw6AajyvZFTFCMsVaA_1EXleEOm21Ihz9X_ZFI0K/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}






10. Tabbed Grey Drop Down 




HTML CODE: 


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>





CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5XlyjHKheyYTpfD_KopPRJPm7i-VKTBrDqOfca9BAjSeD6bENzjjNe2V9jqkGgC6ApvtZ8dIQWDbU5LXN0kaZa4N_SSadikZqVfC8aKq621hAKfHwSctU14IvkaIPyvoe_iB5FAkKpCVp/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #9f9f9f;

border-right:2px solid #9f9f9f;

border-bottom:2px solid #9f9f9f;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqxbG4k3iSBwGxtFW2wK7OV8CiwKEyLI8gyf_icTkjuwWlGEiE2a7eRMNEvMzB3eWdW5XgTtNroZSUcwj713M5T1as-PViT6iqv5vtPSPwNnMClq6qTfsZukWPt67SMj61x3Bp18sG3fTQ/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}





11. Red Tabbed Drop Down 






HTML CODE: 


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>





CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7NznQt7FPeRS_9sOeA37FsF5-g4s_SbHMayYy6_OGRA3pyWhikzsiDMJvzBDhfeYMzfL6J0AnuVA0WhmaKRWRcwr2jsW4-X6sc9ulP80mQkohfXmUrDmT_O8zC7hIbpG1qOcD58Cae2hw/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #a80329;

border-right:2px solid #a80329;

border-bottom:2px solid #a80329;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurehTHa-qQifWgwzbn-fCsWDUVnUwSjbAO2deo-ZbIvkUKYbxUcZBLrE-mEnbyJtivOuHR3dVVVFRM6bm2_IKKw_Wl_JtygQ9nIr2MepNC4zHo0IdNg8NRTHeFL1PypjJpAsAD-q-X2FC/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}




12. Black Tabbed Drop Down 






HTML CODE: 


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>





CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl6I2L02rh6saLYxFsOn3975gvOiu3klf7jKAALktB2SBupnYJ35-k3NKTG2lrfiYvcNOdySjyTxQedBQLMPMRvLx3gJ2c7e8DQPL3MmyJ3zJiUkyDN7RuExavRLFB3ZPfw5jXgJji5dSM/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #000000;

border-right:2px solid #000000;

border-bottom:2px solid #000000;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnL5UoWGsAQeF6MfVRV-QWuLxaYX2RpcfqT-ojzQ3rkgIK0LRwbXAQEWgC_63uW3vt7P1eqPRioVN3dDxRjrHgkyul5g3ECQg-1romI2X0yWky0nPJ9wFiyerAhWrz2tbmz9bM2DJbulfi/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}





13. Orange Tabbed Drop Down 






HTML CODE: 


<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>






CSS CODE:


.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font-family:verdana,geneva,arial,helvetica,sans-serif;

font-size:14px;

font-weight:bold;

color:8e8e8e;

}

.menu ul{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpoLGbkW0T530z4xHw2mDIdKgzoTHstoRDUFKJbHROey5LliWE7PTbMi2iJ5EhSBisboPu7ZWx-P4c4sWTu9bFWAQKTBjB3n1hAsNBa_tvW_VXf5yD-S0n7n2d8wYTFZuwVwQ-LU53j22P/s1600/menu-bg.gif) top left repeat-x;

height:43px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px 8px 0px 8px;

}

.menu li a{

color:#666666;

display:block;

font-weight:bold;

line-height:43px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover{

color:#000000;

text-decoration:none;

}

.menu li ul{

background:#e0e0e0;

border-left:2px solid #f68618;

border-right:2px solid #f68618;

border-bottom:2px solid #f68618;

display:none;

height:auto;

filter:alpha(opacity=95);

opacity:0.95;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;

}

.menu li li {

display:block;

float:none;

padding:0px;

width:225px;

}

.menu li ul a{

display:block;

font-size:12px;

font-style:normal;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover{

background:#949494;

color:#000000;

opacity:1.0;

filter:alpha(opacity=100);

}

.menu p{

clear:left;

}

.menu #current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIBT6I0_WdLqtqjqra6gZBusLSi3Vnt2-XsuYlSkmRyjXvOsqCv2LAx5Bbc14VdNGojgvGIm22z2_4UCTZi64XLjUBvw5z68v99JM5VV3ViQ4T_01xIwWpABL0pu40ji9OJoEamemwUa8z/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}





14. Simple Red Drop Down Menus 






HTML CODE: 


<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>







CSS CODE:


div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }








15. Simple Black Drop Down Menus 






HTML CODE: 


<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>







CSS CODE:


div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }








16. Simple Blue Drop Down Menus 






HTML CODE: 


<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>







CSS CODE:


div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }








17. Simple Green Drop Down Menus 






HTML CODE: 


<ul id="navigation-1">

<li><a href="#" title="Home">Home</a></li>

<li><a href="#" title="Products">Products</a>

<ul class="navigation-2">

<li><a href="#" title="Electric Guitars">Electric Guitars</a></li>

<li><a href="#" title="Acoustic Guitars">Acoustic Guitars <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Six String">Six String</a></li>

<li><a href="#" title="Twelve String">Twelve String</a></li>

</ul>

</li>

<li><a href="#" title="Bass Guitars">Bass Guitars</a></li>

<li><a href="#" title="Accessories">Accessories <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Guitar Stands">Guitar Stands</a></li>

<li><a href="#" title="Strings">Strings</a></li>

<li><a href="#" title="Tuners">Tuners</a></li>

<li><a href="#" title="Plectrums">Plectrums</a></li>

<li><a href="#" title="Capos">Capos</a></li>

<li><a href="#" title="Cases">Cases</a></li>

<li><a href="#" title="Straps">Straps</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="#" title="Your Account">Your Account</a>

<ul class="navigation-2">

<li><a href="#" title="Log In">Log In</a></li>

<li><a href="#" title="Register">Register</a></li>

</ul>

</li>

<li><a href="#" title="Help">Help</a>

<ul class="navigation-2">

<li><a href="#" title="FAQs">FAQs</a></li>

<li><a href="#" title="Forum">Forum</a></li>

<li><a href="#" title="Contact Us">Contact Us</a></li>

</ul>

</li>

<li><a href="#" title="Blah">Links</a>

<ul class="navigation-2">

<li><a href="#" title="Taylor Guitars">Taylor Guitars</a></li>

<li><a href="#" title="AER Amplifiers">AER Amplifiers</a></li>

<li><a href="#" title="Shure Microphones">Shure Microphones</a></li>

<li><a href="#" title="International">International <span>&raquo;</span></a>

<ul class="navigation-3">

<li><a href="#" title="Musican's Friend">Musican's Friend</a></li>

<li><a href="#" title="Thomann Music">Thomann Music</a></li>

<li><a href="#" title="Turnkey">Turnkey</a></li>

</ul>

</li>

</ul>

</li>

</ul>






CSS CODE:


div#container

{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }



h1

{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:right; }

p { margin:0; padding:1.2em; }

p a:link,

p a:visited,

p a:hover,

p a:active

{ font-weight:bold; color:#b9121b; }



ul#navigation-1

{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}

ul#navigation-1 li

{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }

ul#navigation-1 li a:link,

ul#navigation-1 li a:visited

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }

ul#navigation-1 li:hover a,

ul#navigation-1 li a:hover,

ul#navigation-1 li a:active

{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }



ul#navigation-1 li ul.navigation-2

{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }

ul#navigation-1 li:hover ul.navigation-2

{ display:block; }

ul#navigation-1 li ul.navigation-2 li

{ width:146px; clear:left; width:146px; }



ul#navigation-1 li ul.navigation-2 li a:link,

ul#navigation-1 li ul.navigation-2 li a:visited

{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li:hover a,

ul#navigation-1 li ul.navigation-2 li a:active,

ul#navigation-1 li ul.navigation-2 li a:hover

{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }



ul#navigation-1 li ul.navigation-2 li ul.navigation-3

{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }

ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3

{ display:block; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited

{ background:#b9121b; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,

ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active

{ background:#ec454e; }

ul#navigation-1 li ul.navigation-2 li a span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }

ul#navigation-1 li ul.navigation-2 li:hover a span,

ul#navigation-1 li ul.navigation-2 li a:hover span

{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }





















Select Any one menu from the above given list 





How To Add Drop Down Menu Widget To Blogger


1. Go To Blogger > Design

2. Click Add a Gadget or Add a Page element

3. Choose HTML/JavaScript widget

4. Simple Paste the Navigation Menu Code inside HTML/JavaScript widget

5. Hit Save

6. Drag HTML/JavaScript widget and drop it just under your Blog Header, as shown below,



To change the links, Edit this part of the HTML in all codes below,
<div class="menu">

<ul>

<li><a href="#" >Home</a></li>

<li><a href="#" id="current">Products</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/faq.php">FAQ</a>

<ul>

<li><a href="#">Drop Down CSS Menus</a></li>

<li><a href="#">Horizontal CSS Menus</a></li>

<li><a href="#">Vertical CSS Menus</a></li>

<li><a href="#">Dreamweaver Menus</a></li>

</ul>

</li>

<li><a href="/contact/contact.php">Contact</a></li>

</ul>

</div>

Replace the hash(#) sign with your Page Links /URL and replace Home, Products, Drop Down CSS Menus etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,
<li><a href="#">Home</a></li>






How to Add CSS for Menu:-


Instructions To Follow:
Log in to Blogger, go to Design -> Edit HTML and mark the tick box "Expand Widget Templates"




- Find this type of code ]]></b:skin> and just before paste this CSS Code:.menu{

border:none;

border:0px;

margin:0px;

padding:0px;

font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;

font-size:14px;

font-weight:bold;

}

.menu ul{

background:#333333;

height:35px;

list-style:none;

margin:0;

padding:0;

}

.menu li{

float:left;

padding:0px;

}

.menu li a{

background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizXdzZPjr0kvFiiq6Qi5x-IQlvA7tCPefCOI1yBhPRP6smSBUCV6N6GPPChjfiZijt1alfwRJPJrb9IPUUOyonJoEpu6gIb9cwOvSJwZNy-k5_tF5aaZ3UjxQK0qMyUkoLSKVKyWA_RKCB/s1600/seperator.gif") bottom right no-repeat;

color:#cccccc;

display:block;

font-weight:normal;

line-height:35px;

margin:0px;

padding:0px 25px;

text-align:center;

text-decoration:none;

}

.menu li a:hover, .menu ul li:hover a{

background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqHwnG_fB7Ni1lXfLXX7MOQM7fZJKxi_331fMd2kGMbQfftryOr6fN7lnB2ATKoF89Qdtk2OnJUoi66YHOd3TBXg_LGJXOxPXGgt5JOrJlYYJcT6I2YPQqJp6iAF83WXreXdvbFCkg5LsG/s1600/hover.gif") bottom center no-repeat;

color:#FFFFFF;

text-decoration:none;

}

.menu li ul{

background:#333333;

display:none;

height:auto;

padding:0px;

margin:0px;

border:0px;

position:absolute;

width:225px;

z-index:200;

/*top:1em;

/*left:0;*/

}

.menu li:hover ul{

display:block;



}

.menu li li {

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbYia5HsX1EkG186msuRHgNIhlZmZUGyU0CyOOuoiLkcqNVo1p85ngbzAJtyewWwyvLf9hss7x7WZVh0JCr0VgaYMbtdXepRHdsa2GTTbmdfHb0qRjjc9rRI8cBbolg1m2gdsgnk99oN9i/s1600/sub_sep.gif') bottom left no-repeat;

display:block;

float:none;

margin:0px;

padding:0px;

width:225px;

}

.menu li:hover li a{

background:none;



}

.menu li ul a{

display:block;

height:35px;

font-size:12px;

font-style:normal;

margin:0px;

padding:0px 10px 0px 15px;

text-align:left;

}

.menu li ul a:hover, .menu li ul li:hover a{

background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb9em3bx56MBV6b1OZrP0U1f5oOPz5-bWH9FuMEByIz8ct4bS50MJ2aA5Tb9zBsbNiUshwAGdp5Snf7-_Bgs3_11ddEWpIK1fcT-NjuYphCWRrOcb0XeBWSFL0tR7MtpLTThV8CCJVRk_C/s1600/hover_sub.gif') center left no-repeat;

border:0px;

color:#ffffff;

text-decoration:none;

}

.menu p{

clear:left;

}



Now Click Save Template
»»  READ MORE...
Posted by at 08.37 0 comments
Labels:

cara mengatasi IDM fake 6.12

Cara Mengatasi IDM Fake Serial Number - Banyak para pengguna IDM mengeluh dengan adanya Fake Serial Number setelah saya memberikan software keygen yang saya posting sebelumnya di artikel sebelumnya yakni Download IDM 6.12 Build 12 Full Version Full Patch dan Serial Number 

Untuk para pecinta IDM Manager jangan bingung ataupun linglung dengan masalah tersebut mari kita atasi secara bersama-sama bagaimana cara untuk mengatasinya.

Langsung saja ke topik pembahasannya dan ikuti langkah-langkahnya :
1. Sebelumnya Uninstall terlebih dahulu IDM sobat kemudian Download IDM 6.12 Build 12 Full Version Full Patch dan Serial Number

2. Kemudian menuju ke Run. caranya klik Start >> Run >> ketik regedit >> OK,

3. Setelah itu cari HKEY_LOCAL_MACHINE >> SOFTWARE >> Internet Download Manager hapus yang Internet Download Manager. 

4. Install Download IDM 6.12 Build 12 Full Version Full Patch dan Serial Number (internet harus dalam keadaan disconnect) setelah di Install Keluar dari IDM tadi, termasuk yang di system tray icon (pojok kanan bawah dekstop)

Copy file Patch yang tadi telah anda download kedalam directory Folder instalan IDM,

Contoh anda menginstal IDM di file C:\Program Files\Internet Download Manager (Paste di directory ini patchnya ).

5. Kemudian Klik Patch tadi setelah muncul lakukan patching di directory C:\Program Files\Internet Download Manager


Jika anda ingin mendownload atau ingin mengetahui Serial Number IDM Terbaru bisa mengunjungi link Serial Number dan Patch IDM Terbaru

Read more: http://adie-konoe.blogspot.com/2012/05/cara-mengatasi-idm-fake-serial-number.html#ixzz25gl69ZZZ
»»  READ MORE...
Posted by at 04.40 0 comments
Labels:

Minggu, 26 Agustus 2012

subtitle



Cara Mudah Translate Subtitle Film Inggris ke Indonesia

Akhir-akhir ini hoby nonton film kambuh lagi (biasanya kalau sudah seharian kerja, sambil santai-santai nonton film yang lucu-lucu biar wajah gak cemberut lagi, soalnya film-film terbaru yang tadinya harus beli DVD bajakannya di emperansimpang lima, atau di mall, sekarang bisa cari di internet full, lengkap beserta terjemahnya, tentunya dibantu adanya koneksi internet super cepat dari smart :D, cuma kadang kala terjemah atau subtitle dari film yang beredar di internet ada yang masih berbahasa inggris, kalau nonton sambil translate sendiri kayaknya bikin mumet dech.... apalagi kemampuan bahasa inggrisnya pas-pasan, malah bukan pas-pasan lagi gak mudeng blass, wakkkk.... kasusss.....
Setelah semalem dapat film baru lagi, dan kebetulan subtitle nya masih bahasa inggris, jadi kepikiran bisa mentranslate subtitle film bahasa inggris ke bahasa Indonesia, langsung dech berburu software dengan mencari di mbah google dengan kata kunci "create and edit subtitle movie" dan hasilnya saya dapatkan software gratis Subtitle Edit 2.8.7 dengan kemampuan mampu membaca dan mengedit subtitle dari film. software ini bisa anda download disini.




Sebenarnya ada software yang bisa mengedit dan mentranslate sekaligus, cuma tidak gratis. dari pada beli atau cari-cari cracknya dan belum tentu ada, mending coba maksimalkan yang gratis saja, tentunya karena gratis fasilitasnya juga kurang lengkap, jadi saya padukan saja dengan Google Translate untuk mentranslate bahasanya,  nah untuk caranya setelah anda download software Subtitle Edit extract dan jalankan software (tanpa install).
setelah terbuka jendela Subtitle Edit , kita buka subtitle yang akan kita edit:
kemudian pilih tab source view dan select All (ctrl A),
kemudian langkah berikutnya kita copy-paste ke dalam form translate google,
dan lakukan translate English to Indonesia, dalam proses ini ada beberapa hal yang perlu anda perhatikan:

  1. Tidak mesti sekali klik translate langsung berhasil tertranslate semua,solusinya: Lakukan reload (refresh) untuk mengulang proses translate google, lakukan sampai benar-benar subtitle tertranslate semua, biasanya 2-3 kali reload sudah beres.
  2. Ada kode penting yang berkurang yaitu kode --> setelah proses translate google menjadi -> , Solusinya: lakukan replace atau merubah kode tersebut kesemula yaitu ke kode --> , untuk cara mereplace sama seperti pada program Ms. Word
Setelah proses translate google dan proses replace selesai, silahkan anda edit lagi hasil translatenya, tapi kalau malas biarkan saja juga gak papa, sudah lumayan bisa ngikuti alur cerita filmnya, copypas hasil translate ke dalam source view di software Subtitle Edit tadi, jangan lupa isi dari source view subtitle yang lama di hapus terlebih dahulu.
Simpan hasil translate, dan silahkan anda menikmati film kesukaan anda.

Semoga informasi ini bermanfaat untuk anda pecinta film, atau biasa saya sebut sebagai kaum SUFI (Suka Film), hihi...

Update: Teknik translate Subtitle tanpa software berbayar posting disini, cuma pakai notepad bawaan windows (Recomended)
»»  READ MORE...
Posted by at 02.05 0 comments
Labels:

Kamis, 23 Agustus 2012

cara mengubah subtitle



CARA MUDAH MENGUBAH SUBTITLE INDONESIA MENJADI INGGRIS
Gimana sih caranya nge-sub?….
Kalian pasti banyak yang dah tau klo subtitle itu faktor yang super penting buat kita para pencinta derama ato movie yang rata-rata gak memadai bahasa jepangnya ato nggak dah ada bahasa inggrisnya untuk bisa menikmati tayangan-tayangan tersebut… :D . Namun, sayangnya sub-sub atau teks yang ada seringnya berbahasa Inggris dimana gak semua juga para penikmat derama ato movie seneng dengan bahasa yang satu ini, selain cape karena otak mesti berpikir 2 kali untuk mencerna dialog… :D juga gak semua orang-orang terdekat kita seperti keluarga bisa ikut menikmati dengan sub bahasa inggris,…..tul gak?
Nah atas dasar itu, ada beberapa DLers berinisiatif untuk mengerahkan kemampuan dan waktu mereka untuk mengartikan teks-teks bahasa Inggris yang ada di beberapa dorama menjadi bahasa Indonesia, supaya bisa dinikmati oleh para DLers juga.
Jadi gimana donk caranya nge-sub??…
Oke…Oke….kita mulai jelasin yah……. :D
Apa sih subtitle?
Subtitle adalah teks terjemahan yang biasanya terletak di bagian bawah video. Subtitle sangat penting bagi kita kalau kita tidak mengerti bahasa yang diucapkan oleh aktor yang tampil dalam video tersebut. Nah, berhubung fungsinya yang sangat penting bagi para penggemar anime, dorama maupun film holywood, kenapa kita tidak iseng-iseng mencoba membuat atau menyunting subtitle dari sebuah anime/film?
SRT si Penerjemah kecil
.SRT File adalah sebuah file kecil yang berekstensi (.SRT) dan berisi terjemahan dari sebuah video. File ini tidak memakan banyak memory karena biasanya berada dalam kisaran KB (Kilo Byte). Tehnik penerjemahan melalui .SRT file ini cukup populer dikalangan Subber-fansub. para Subber-fansub ini menerjemahkan dialog-dialog dalam video kemudian menyebarkannya untuk fans lain di internet secara gratis.
BAGAIMANA MEMBUATNYA?
Mudah! Membuat file tersebut sangat mudah, tanpa perlu menginstall program lain. Euh,…oke anda memang membutuhkan program ataupun plugin lain untuk memutarnya, tapi untuk membuatnya anda hanya perlu menggunakan notepad. Sebuah alat pengedit teks sederhana bawaan windows yang secara default bisa dibuka melalui menu start->programs->accessories->notepad.
Membuat File SRT
Format untuk tipe .SRT sendiri sederhana dan mudah dimengerti, bentuknya seperti :
1 ( disebut juga Session atau bingkai dialog yg ada pada sepersekian detik adegan)
00:00:00,567 –> 00:00:05,902 = Waktu terjemahan ditampilkan (jam:menit:detik:milidetik)
Untuk file srt, digunakan apa yang disebut angka sesi. Yaitu 1,2,3, dan seterusnya diawali sebuah perintah tampilan terjemahan. Jika anda ingin terjemahan berupa 2 baris, cukup di ketik di bawahnya saja pada saat penulisan sebuah percakapan dengan tekan Enter, setelah itu di teruskan dengan percakapan di menit lainya.
Mengedit File SRT
Setelah mengetahui tentang dasar dan asal mula file subtitle yaitu dot srt. saya akan mengajarkan bagaimana cara merubah bahasa subtitle pada file srt yang sudah ada sebelumnya.
1. Cari subtitle inggris yang cocok dengan film yang kita miliki(bisa dicari di google)
2. Buka subtitle tersebut dengan notepad, lalu terjemahkan bahasanya dengan cara, dicopy pastekan ke software kamus bahasa atau seperti saya menggunakan http://translate.google.com dan ini saya anggap paling bagus translatenya . Kalau umau terjemahkan sendiri ya silahkan mungkin lebih bagus.., hehehe ^_^
3. Jika menggunakan google translate jangan langsung dicopy pastekan semuanya, bagi film/movie yang percakapanya lebig dari 1000 pembicaraan. Karena google translate hanya bisa menterjemahkan kurang kebih  5000 kata dan itu biasanya 600-700 percakapan saja. Apabila dipaksakan biasanya ada yang tidak dikeluarkan dalam hasil translatenya. hal ini dapat di lakukan dengan cara bertahap.
4. jika sudah diterjemahkan semuanya maka buka dinotepad baru, maka biasanya ada yang berbeda dengan di subtitle aslinya yaitu tanda panahnya berkurang satu tanda ( – ) ,yang seharusnya ( – ->) menjadi cuman( ->) , untuk itu kita harus merubah semuanya menjadi seperti semula, klo sempat bs juga dirubah satu persatu…He..he….. itu akan menghabiskan waktu yang lama dan mungkin anda semua ngga akan sabar karena jumlahnya bisa 1000 lebih, itu bisa diakali dengan menggunakan bantuan microsoft word. caranya sebagai berikut
  • Copy seluruh tulisan translate nya
  • Blog text minus dan panah (->). Kemudian menggunakan bantuan Fine and Replace untuk merubahnya yaitu tombol cepatnya ( Ctrl+F) dan akan muncul kolom seperti di bawah ini yaitu gambar sebelum dan sesudah.
  • Setelah pengeditan ini ini dilakukan copykan kembali pada notepad yang anda buat dan save.
  • Translate yang ada buat telah selesai dan saatnya play dengan cara memberi nama yang sama dengan filmnya/movienya.., atau juga di upload manual. Dapat saya contohkan salah satu editan saya pada gambar di bawah ini
sebelum
sesudah
Selamat mencoba,
Perlu di diperhatikan  kata-kata apapun yang anda tuliskan pada subtitle akan keluar pada saat play di waktu yang anda tentukan, dan jangan mengubah tanda titik,koma,kurung dll yg ada pada format subtitle karena software player tidak akan membacanya.
Hal ini saya kutip dari berbagai sumber yang saya rangkum, semoga bermanfaat
»»  READ MORE...
Posted by at 20.45 0 comments
Labels:

Selasa, 21 Agustus 2012

FREE DOWNLOAD MANAGER



Ketika membicarakan masalah software download manager untuk mempercepat download, hampir sebagian besar orang akan menyebut IDM (Internet Download Manager) maupun DAP (Download Accelerator Plus). Hal itu tidaklah mengherankan karena baik IDM maupun DAP memang merupakan software yang paling populer di kelasnya. Akhirnya banyak orang memakai Internet Download Manager dan Download Accelerator bajakan dengan crack sebagai solusinya. Hal ini beresiko terhadap terinfeksinya komputer kita dengan virus, spyware, malware maupun threat berbahaya lainnya yang terkadang disisipkan melalui crack tersebut.
Free Download Manager untuk Mempercepat Download Secara Gratis
Free Download Manager untuk Mempercepat Download Secara Gratis
Untuk itu sekarang PG akan membagikan tips dan cara mempercepat download hingga 6 kali lipat dengan Free Download Manager (FDM). Free Download Manager adalah sofware download manager gratis namun memiliki kemampuan untuk meningkatkan kecepatan download hingga 6 kali lipat! Hasil ini PG peroleh ketika melakukan pengujian terhadap software free download manager.
Untuk membuktikannya, PG melakukan pengujian terhadap peningkatan kecepatan download antara sebelum dan sesudah menggunakan Free Download Manager. Berikut ini adalah hasil perbandingan kecepatan download tersebut :
advertisements
1. Kecepatan download sebelum menggunakan FDM adalah 34.4 KB/sec
Kecepatan Download Sebelum menggunakan FDM
Kecepatan Download Sebelum menggunakan FDM
2. Kecepatan Download Dengan Menggunakan FDM meningkat drastis menjadi 186 KB/sec atau meningkat hampir 6 kali lipat lebih cepat
Kecepatan Download dengan Menggunakan FDM Meningkat Drastis
Kecepatan Download dengan Menggunakan FDM Meningkat Drastis
Dengan begitu didapatkan hasil bahwa kecepatan download sesudah menggunakan Free Download Manager meningkat hingga 5,5 atau hampir 6 kali lebih cepat daripada sebelum menggunakan FDM.
Fitur dari Free Download Manager (FDM) adalah :
1. Gratis dan Legal
Tidak seperti software Internet Download Manager (IDM) atau Download Accelerator Plus (DAP) yang berbayar, Free Download Manager (FDM) ini bisa anda gunakan secara gratis dengan kemampuan yang tidak kalah ampuh.
2. Support BitTorent
Bagi anda pengguna windows 2000,XP,2003 maupun Vista, anda bisa menikmati fitur support BitTorent ini. Dengan fitur ini anda bisa mendownload dari BitTorent protocol tanpa menggunakan software torrent downloader.
3. Upload Manager
Dengan kemampuan ini, anda bisa dengan mudah mengupload file dan berbagi dengan teman anda langsung melalui FDM
4. Support Video Download
FDM mampu mendownload video dalam berbagai format termasuk flash video format (.flv) seperti yang digunakan oleh YouTube, Google Video, dsb. Anda bisa mendownloadnya sebagai .flv atau langsung mengconvertnya ke berbagai format video populer lainnya.
5. Remote Control
Anda bisa mengakses Free Download Manager secara remote via internet mulai dari membuat download baru, melihat list download yang sedang aktif maupun proses download yang sudah selesai.
6. Portable Mode
Anda tidak perlu menginstal FDM lagi ketika anda ingin menggunakan komputer lain. Anda cukup membuat versi portable dari Free Download Manager dengan mudah dari menu yang telah disediakan.
7. Menu Pengaturan Audio/Video yang Lengkap
Anda bisa melihat video atau mendengarkan audio bahkan ketika proses download belum selesai. Setelah proses download selesai anda juga bisa langsung mengconvertnya menjadi format yang anda inginkan. Semua bisa anda setting secara otomatis.
8. Download Acceleration
Ketika anda mendownload file, Free Download Manager akan membagi file tersebut menjadi beberapa bagian dan mendownloadnya secara bersamaan. Hal ini membuat proses download menjadi jauh lebih cepat. Sesuai dengan pengujian yang PG gunakan, FDM bisa mempercepat download hingga hampir 6 kali lebih cepat.
9. Resume proses download file yang broken
Ada kalanya ketika kita mendownload file, maka ada hal-hal yang membuat proses download kita terhenti misalnya saja koneksi yang tiba-tiba down, lampu yang tiba-tiba mati, komputer yang restart tiba-tiba dan masih banyak penyebab lainnya. Hal tersebut membuat proses download kita terhenti. Dengan Free Download Manager, anda bisa meresume atau melanjutkan proses download yang terhenti tersebut. Hal ini akan menghemat waktu dan uang anda daripada harus mendownload semuanya dari awal lagi.
10. Pengaturan File dan Scheduler file yang powerful
Anda bisa mengatur jenis-jenis file yang anda download berdasarkan tipe nya. Anda bisa menyimpan tipe-tipe tersebut di folder yang berbeda ketika anda mendownloadnya. Anda juga bisa start dan pause proses download yang sedang berlangsung.
11. Pengaturan Penggunaan Traffic dan Kecepatan Internet
Ada kalanya anda ingin download sambil browsing. Terkadang kita jengkel ketika mendownload suatu file dengan software download manager, maka bandwidth akan tersedot habis untuk mendownload file tersebut. Akibatnya browsing menjadi sangat lemot. Nah dengan Free Download Manager ini anda bisa mengatur berapa traffic atau bandwidth yang ingin anda gunakan untuk download, sehingga sisanya bisa anda gunakan untuk browsing tanpa terganggu proses download yang sedang berlangsung
12. Memiliki Site Explorer
Dengan Site Explorer, anda bisa dengan mudah melihat dan mengatur folder tempat anda menyimpan file hasil download anda.
13. Memiliki HTML Spider
Anda bisa mendownload halaman sebuah situs dengan menggunakan HTML spider ini. Anda juga bisa memerintahkan HTML Spider ini untuk hanya mendownload file dengan tipe tertentu di sebuah halaman website.
14. Download bersamaan dari banyak server Mirror sekaligus
Free Download Manager akan mendownload file dari banyak mirror sekaligus untuk semakin meningkatkan kecepatan download anda.
15. Proteksi terhadap Spyware dan Adware dari Komunitas FDM
Ketika anda mendownload sebuah file, maka anda bisa secara langsung melihat komentar pengguna FDM di seluruh dunia yang sudah mendownload file tersebut. Dengan begitu anda bisa membaca peringatan dari komunitas ketika file yang anda download ternyata berbahaya dan mengandung virus, spyware, adware maupun threats berbahaya lainnya.
Fitur sebanyak itu dan fakta hasil pengujian PG menunjukkan bahwa Free Download Manager tidak kalah, bahkan bisa lebih unggul dari software download manager berbayar yang populer saat ini.
Untuk itu bagi anda yang suka mendownload file dari internet, berikut ini PG berikan tips bagaimana cara install dan cara menggunakan Free Download Manager secara detail langkah demi langkah :
1. Download FDM secara gratis disini :
http://www.freedownloadmanager.org/download.html
panduan windows 7 gratis
Download FDM
Download FDM
2. Double Klik Installer FDM yang baru saja anda download
Double Klik Installer FDM
Double Klik Installer FDM
3. Klik Next untuk memulai proses instalasi Free Download Manager
Memulai Instalasi FDM
Memulai Instalasi FDM
4. Pilih I Accept the Agreement dan Klik Next hingga proses instalasi selesai
Proses Instalasi FDM
Proses Instalasi FDM
5. Klik Finish Ketika Proses Instalasi selesai
Proses Instalasi FDM Selesai
Proses Instalasi FDM Selesai
6. Free Download Manager akan otomatis terbuka saat pertama kali penginstalan. Ketika keluar dialog box, silahkan pilih kecepatan koneksi internet anda dan klik Finish
Setting Awal FDM
Setting Awal FDM
7. Untuk mendownload file, cukup klik link file yang ingin anda download (Di contoh berikut ini saya mendownload dari mediafire)
Memulai Proses Download
Memulai Proses Download
8. Atur pengaturan untuk penyimpanan file dan klik OK
Pengaturan penyimpanan File
Pengaturan penyimpanan File
9. Ketika muncul Kotak Konfirmasi, centang “Do Not Preview in The Future” dan klik Yes
Konfirmasi Download
Konfirmasi Download
10. Selamat menikmati kecepatan download anda secara maksimal.
Dengan menggunakan Free Download Manager ini, proses download anda bisa menjadi lebih cepat hingga 6 kali lipat. Meningkatnya kecepatan download ini akan menghemat waktu, biaya dan mendownload file menjadi lebih menyenangkan.
»»  READ MORE...
Posted by at 21.37 0 comments
Labels:

Minggu, 29 Juli 2012

cara mengetahui password wifi





Mau ngenet tapi dana terbatas ? Mau internetan gratis tapi kesulitan mencari tahu password wifi ? Mungkin tutorial kali ini bisa memudahkan anda mendapatkan koneksi via wifi yang tersedia di kota anda.



Hack Password Wifi ini berasal dari sebuah tool sederhana yang akan membantu anda mencari jaringan wifi terdekat sekaligus memberitahu apa password yang digunakan 
Dengan cara ini anda tidak perlu lagi bingung berpindah2 tempat hanya untuk mencari internet gratis. Namun untuk bisa menikmati fasilitas ini, anda diwajibkan untuk melakukan download guna mendapatkan tool hack password wifi yang dimaksud. 
Yang perlu anda ketahui bahwa hack password wifi versi ini menggunakan software WirelessKeyView. Namun anda tidak perlu bingung karena penggunaan software ini sangat mudah.Jika anda sudah mengunduh tool tersebut, silahkan buka WirelessKeyView dan ia akan langsung mencari jaringan wifi secara otomatis yang terproteksi password maupun yang free. 
Jika sudah siap, silahkan untuk mengcopy langsung password ke wifi yang terproteksi oleh password. Copy kalimat atau angka atau huruf atau simbol lain yang ada di bagian&nbsp 






-- Untuk mencoba silahkan download tool --


Download WirelessKeyView untuk Windows Xp 32bit atau Windows7/Vista 32bit disini 
Download WirelessKeyView untuk Windows Xp 64bit atau Windows7/Vista 64bit disini
64bit
Kalau Cara di Atas Masih Tidak Bisa, Gunakan Cara Kedua HACKWIFIV2

 atau

cara untuk mengetahui password wifi gampang , kita butuh software tambahan untuk menembus keamanan wifi yang terpassword tersebut , untuk tingkat keberhasilannya saya sendiri belum pernah coba, karena selama ini saya menggunakan wifi pribadi hehehe…
Berikut Langkah-Langkahnya :
Download tool WirelessKeyView  disini.
Jika operasi sistem anda menggunakan Windows XP SP2 disarankan menginstall KB918997 update. Silahkan download disini, setelahnya install update tersebut.
Selanjutnya install tool WireleesKeyView.
cara bobol password wifi
Nah, semestinya password yang anda cari akan ditampilkan.
»»  READ MORE...
Posted by at 19.21 0 comments
Labels:

Jumat, 15 Juni 2012

register mechanik serial number



Name: KARL BREURE
Serial: 4911-5F50-6AB5-2602-A062-5270-21A6-8123

S/N: Name: Dana Simmons
Serial: 931A-CEBF-9617-5F21-CABE-8AE2-F998-1CCE

S/N: Registration Name: Warwick Sola
Serial Number: F07A-A236-A42A-2A45-4150-E03B-F2F5-F9E2

Name: Giovanni Arocho
S/N: BFDF-D4A4-6FE8-58A9-534C-7BB2-111C-C93B

name:- warez-killer
Serial:- B6B7-5631-4DEA-5F66-83B3-5A54-F88C-663F
»»  READ MORE...
Posted by at 03.46 0 comments
Labels:

Selasa, 12 Juni 2012

cara menghilangkan pesan fake di IDM


3 hari yang lalu IDM (Internet Download Manager )yang aku gunakan terdapat pesan fake serial number.pesan berupa daftar nama,nama akhir,email dan serial number ini mengakibatkan software IDMku tidak berfungsi (maklum aku tidak tau SN nya alias pakai Versi trial) 

Aku sempat bingung juga si coz aku sukanya yang free gitu khikhikhi...ahirnya aku putuskan googlink untuk mengatasi masalahku ini.setelah kesana kemari kesini cari solusi akhirnya ku dapatkan juga
nah dibawah ini ada tips manjur nich untuk menghapus dan mengaktifkan kembali IDM yang kadaluarsa coba dech!!



IDM atau Internet Download Manager dipakai sebagai pemercepat men-download atau mengunduh file-file dari Internet. Tanpa menggunakan IDM, file-file yg di-download akan lambat sekali, apalagi jika terputus ditengah-tengah, anda harus mengulangi dari awal, dengan IDM semua itu tidak akan terjadi (dengan catatan server file sumber tidak memblokir fasilitas Auto Resume = file akan didownload mulai bagian yang terputus).
IDM sangat membantu ketika kita ingin download file dari internet, dengan fasilitas Auto Resume nya, serta kecepatan proses download, dan yang sangat membantu IDM bisa dijadikan sebagai media untuk men-download file Video dari Youtube.com. Jika IDM sudah anda install di kompie anda, maka secara otomatis akan ter-integrasi dengan Mozilla Firefox, dan otomatis pula setiap anda membuka situs Video seperti Youtube, ketika Video akan terbuka, maka di kanan atas dari gambar video akan muncul tombol Download dari IDM. Namun ada juga efek buruknya jika anda install IDM di PC anda, dan PC anda tersambung ke Jaringan Lokal (LAN-Local Area Network) di kantor, maka Bandwidth alias jalur internet yang ada akan tersedot hanya ke PC anda, akibatnya PC lain yang saat itu sedang akses Internet akan menjadi lambat koneksinya.
Bagi yang belum install IDM nya saya coba membantu memberikan link Download nya di sini.
Untuk yang sudah pernah meng-installnya, mungkin anda mengalami mendapat pesan yang kira-kira artinya anda telah menggunakan IDM dengan serial number alias Fake Serial Number, hal ini terjadi tanpa anda sengaja anda atau orang lain yang menggunakan komputer anda telah meng-klik tombol Update. Setelah muncul pesan ini, IDM anda tidak akan bisa digunakan lagi, meskipun anda telah meng-uninstallnya. Satu-satunya jalan anda harus install ulang PC anda.
Dari pada anda harus install ulang PC, disini ada cara yang lebih sederhana untuk mengaktifkan kembali IDM anda yang tadi ketahuan bajakan-nya. Mari sama-sama kita ikuti langkah-langkahnya :
1. Buka file “host” yang terdapat di folder C:\WINDOWS\system32\drivers\etc Silahkan klik tombol kanan mouse anda dan klik menu Open with pilih Notepad
2. Setelah terbuka silahkan tambahkan ini dibawah kata-kata 127.0.0.1 local host:
127.0.0.1 tonec.com
127.0.0.1 www.tonec.com
127.0.0.1 registeridm.com
127.0.0.1 www.registeridm.com
127.0.0.1 secure.registeridm.com
127.0.0.1 secure.internetdownloadmanager.com
127.0.0.1 mirror.internetdownloadmanager.com
127.0.0.1 mirror2.internetdownloadmanager.com
127.0.0.1 www.internetdownloadmanager.com
Biar mudah silahkan copy-paste saja.
3. Kemudian Save file host ini, kemudian ubah properti file ini menjadi Read Only dengan meng-klik kanan file host tersebut pilih properties, kemudian beri tanda centang pada read only.
Berikutnya jalankan IDM,
4. Jika muncul kotak pengisian data-data user dan serial number dari IDM, isilah dengan data-data anda (boleh ngarang …) namun untuk serial number bisa isi dengan ini (pilih salah satu):
3J5U-8U66N-D0B9M-54SLM
EC0Q6-QN7UH-5S3JB-YZMEK
GZLJY-X50S3-0S20D-NFRF9

Tulisan ini ku ambil dari:http://superartikel.com/2011/07/17/menghapus-idm-dari-pc-tutorial-sederhana-dan-praktis/
5. Selesai…sekarang silahkan menggunakan IDM lagi.
Semoga bermanfaat.
»»  READ MORE...
Posted by at 02.37 0 comments
Labels: