ေက်ာ္ေက်ာ္မိုး(နည္းပညာ): 04/22/12

ဒီေအာက္မွာလိုသလိုသာသံုးေပေတာ့ေနာ္အကုန္တင္ေပလိုက္ပီသူမ်ားေတြ
လိုဆရာစာမခ်န္တတ္ဘူးေနာ္ဟဲဟဲသံုးၾကည့္အဆင္ေျပမယ္လို႔ေမွ်ာ္လင့္ပါတယ္
စာေတြကေတာ့အဂၤလိပ္လိုေတြဆိုေပမယ့္လုပ္ဖုိ႔ပံုနဲ႕ျပထားတဲ့အတြက္မခက္ခဲေလာက္ေတာ့ပါဘူးေနာ္.....

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/AVvXsEhgKTulXsv7DcyTLHnqvI1-I4WcZlM8APv0drGWI18-OGTdgJ5D67tPkCbZJPDC_h9fyglMuud7iXjjQm2OtYDQZ-wdgf-6WVMeBUa5E-c5CocMXk-khcvV6OP7Dn7rJOCSSqwwQLj0ybOl/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/AVvXsEjKWEN2V__gmy8TxCynFPB05BZzP6NDoL7C_eKdGbuG7T9e1T8IN2_1T8EQKrJCzXXFxvj-97uOcTMQ2J_lRHGtUTqZEZy_nYoD4h50B0fSy_qac4kxfr8M8X70w0btQ3pC_Tk5g8-giBaO/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/AVvXsEhnwQHe6DN_G9pFxywkWz9ik-wJM60O2D4Lewiqb_h-wwljW_pP1FRG7tcRjsuzzEkDjNEE8XrEcszHW7EyTCYL7VMRJ1fsB3Ly9lFDXVYOO2uY6znsqiUG4qcM-H9IPnHmNzK1RzVvraj6/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/AVvXsEgIhkMFMDlWTSeNSxWx3OMd7Pka0fpdsNV6HYBhJjCykMx_VERaRhcNxmkQ532TuaqD-w8DqtLbx27aoc51YWKEux2y0BhZFx59p6w8V9Hf_Aiul2TgE-CUPfsfKsHzZbdf5hBJ1IeSJ74E/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/AVvXsEiNVs10fhyF4DKQ-7fTqgWsvbZnpgRSX2p6KatK6HcCkzgYA6fHBbahrQi5aG9BC9LJx-nxOIx8gVRsZbHFfQ7FdJNFbc6iwLT3Gwrh145-yNBOetSnGhD0lf_tkDMwzH6LNQF6ORZxR-_X/s1600/nav-bg-l.jpg" alt="" class="float-left" />

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBpmCvHAn-FIP6bxtX_23w8n-Dj1eiCbG8AKTlh7op1TpSHHwqIkaBm5jN4ULsXH7A0dCizxizshofkmSENxL1Q4wSE_TCUUukY0OpvsMJbyb9wO8-H3vWlw1HrfXFsHRe17FXm0qM97Zd/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"> </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/AVvXsEhrcJt4tMkPYptbKHSoDCm-0i8jMr8667NQ-wTocDRPM6CzxBo2-LCrqJYXf5rsL33WlXHKnPZsbfax8MPpVePmIYtWZPFm7Fnc17_zvppz4u-LYtrVbqhtSkyJo26xp2eSnjK-F7kroYCb/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/AVvXsEghD6lHGlxsf7iwOJjrhfrkixQ8sqqaOEPKUsxB-Kg0qsN7MHVGhFCeWUe7jBhJAQ3w1JKG_VuaPYU-3Nrufk-uCf8hWw8rkmAf1frcxUGA5YQxx0MkkQzbIXmFM6c2gBjGxyL4Vy_16WXI/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/AVvXsEghD6lHGlxsf7iwOJjrhfrkixQ8sqqaOEPKUsxB-Kg0qsN7MHVGhFCeWUe7jBhJAQ3w1JKG_VuaPYU-3Nrufk-uCf8hWw8rkmAf1frcxUGA5YQxx0MkkQzbIXmFM6c2gBjGxyL4Vy_16WXI/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/AVvXsEjvZzyKz5vqh8rM4Jk_iujEx9K-jiRSGzNenS0hezq1dyeXq-LKMgBK5T4bUwhS7tEuxN_kzKRQBi82AEBtXAzY8ek6nvUt14siIPBnF3gMH_8x2YvgqRZUbjv8N0nFs930L5Atp2dxobVB/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/AVvXsEidFZaMMvur_W5LfR_1apKEhhwz7i1cn5RVKUMLCpI7DVojzrctA8SSCKezyHIWTaJK8HQnX5zbpnKfz7kdvRfWTUMbgXrp9UE0HjaOfdj0RFYkxyM4ZymB8L4oNe4IQRS3teDdz2VFosV8/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/AVvXsEidFZaMMvur_W5LfR_1apKEhhwz7i1cn5RVKUMLCpI7DVojzrctA8SSCKezyHIWTaJK8HQnX5zbpnKfz7kdvRfWTUMbgXrp9UE0HjaOfdj0RFYkxyM4ZymB8L4oNe4IQRS3teDdz2VFosV8/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/AVvXsEhWVYJsz7LRFlrVX6pOZSDMRuLDix9AYRNXEBLCtNJ_7iSekQzEu2PMijnl28HfxfmiRy_lJL8pmXuN-5g1mgGyG10jmNFw6n-NmyWrSDUQZpIWckhCWs9RCRawDcR9nQIH5PByt8gPL4ip/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> </p>

<p> </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/AVvXsEjXHBpmKvVLBCzGapi2-SkWJe-Ng8sFnb6Zw2vQJ-mA-dJBdlzhW0RukR-krj66w3LmGG1jjF9kfjv8xP8-FHwyqtJQDaCRvIsVc7woRNDbDEIJPK_rf7yoc_3vqdXOnFpTi8tv7aqahai5/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/AVvXsEjUnt1B__llL10sahE6rcDM8Y9EOlcu1ukrl55TTX9175b9zrvWpj4nbZjrWIWxiyhQLE9gLNMIBqpGJsC26v_UrLEd_tjauUE_1xnnjeJtQFi8tEj7PuhhxGv1KoCX25CogEkSZbLhqvbx/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/AVvXsEjhLlydZM-fDmUYaTqaIOegjH4-2-nLPw6rtTye1Cu61gC59hyphenhyphen1oYlLG1gLGGjwH4D5PC4rVGicbiSIJPdhI1t539Fpxhxw2cch_zV0qaPz5wnqCwt2kfFjXBpukXw1z9DqbsB9YJpbdu3t/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/AVvXsEhPY2ZsejBPsNx6-JQZ1rxMQki4tyLCvbbZ5SyevlJxqadVCuUPO3gf9ILuzQVOZV2vrBjvhwqBFXTOsZbB-YYrtRXuQOL7SP1dPdcC3KWaNR5-8tQXyLn-f8GgJnRwEEVxobPiqnZw3uQ9/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/AVvXsEj8ghs0C-ejs0qZ3uAi2lOH-b-G2F2fYskIp1fXSAigUlbUaF1GW2MLPuuxNF7JOVjbGdnigGoMmcIqWw5VOi8dWUr1ySxVHcNy7KaK-jkDjUK03PoIyEIJEs9w8_MiFLC42q9k_lZQr5nN/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/AVvXsEibCVZbO4JbHMo0qtfu77sSw3ko_CzwiC688kzRqaXjMnsbcVEMQ0bdMi78-cYW341JHC8UYIlg2CTU87x7Hsx_nuEAPADR-Q0LaCD1UM3h9Sj7pokC4HbUE3fkS6h6Mm3b1yoUJXnmdfcD/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/AVvXsEhW2dVixM8TWoEQ5UcfGyT-2WibIHpM2_q6xVTeBw2gUziKZvleQVIZCde7ttWWZcROtgTxMApKQE8YHf1dF7cSqPq3aI4ZFdjOIxYeSAxkHm4E3CHh9r3uhomajTWyMrFDh-wQYuXwhjcD/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/AVvXsEimnOI7uq0pcSbkkRAOEMU5WSbmmowEz-OW-5Gdmvs4DUPP7zBQCvObJ6C4FIhcDcCCgkKSLDJjcfaMqk6F42sAf_JQA9gK-CD9vu_2FQjFXz4u_JpjMO1tsY2BxInuDv4Fu8nVxeO5MmOy/s1600/submenu_top.png) no-repeat;

width: 186px;

padding-top: 9px;

}

.nav li ul {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuO6wzvTI-H_uez5qgXYYOzmaEQxFhT6KCfCIBIFniSONgjTSZisXnN1IdbD3vcVTePcliepbeXBhmYpDHV7nPNXtnfpFv4pdOpI0qUC_JipHzUE26-WxwokQELIsD9R2kHebRN3bgOf8c/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/AVvXsEiER0OfBE5_2YMQMDEKQKUBzszVSYQ3TLmR4Z7ezljxfUz528kXvg0aSOurA2r_IPXiGeeNOyBKpLGPu_666whdPIrK113jULd9IkwnvC8SfEiIOMaXaabVwJrzDzO6Mz7MSzwOfSXakrZV/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/AVvXsEhc2lDcHVF3vnqOT0k4HBbCKEk1BRUkbwJja_hWAV2gbSIgDl5Q16XnnTSDJSv08o2rHMEC3QjvcL0hvKI2fWqTgjzlW4jFerYY77STwo8x8SD-cN8u3N4hHru0tN0nonwN0gyvDR902MUp/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/AVvXsEjOxXqNzP44wfu2IsN4ZY2JAW3hrLesS2klgcue-iIufe5uBkKfmYvpR0rVP7wpMasb8C6ci-4rMLAObKFhjX7ZaUkmXbX-HHTQD5OrrKma1RhbViiRZPfp8m9XRO0QEAWHxPI6ru8IDk6x/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/AVvXsEi78c7r_EGUkMBT74doS7GXvtE2SanXiq0hBwkfGQIUfPjS9_vdHUmS798t32QTagKXltoqnHzrPsC26W1blMrd5SaD7iDstGG_aGqu5fA2seBrQ2A_OrKdXI0dJ0hnkxd-vYCXQ0geoYae/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/AVvXsEi78c7r_EGUkMBT74doS7GXvtE2SanXiq0hBwkfGQIUfPjS9_vdHUmS798t32QTagKXltoqnHzrPsC26W1blMrd5SaD7iDstGG_aGqu5fA2seBrQ2A_OrKdXI0dJ0hnkxd-vYCXQ0geoYae/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/AVvXsEh_XSb_iMwIoPLjbyghbeGOe9SZ0sNTG5etQzF-SvFa_5xsx3KRDWmrVQHoemBWFV32jOZ5FpFgp3bvUBoMbnoHy-c4HpOn9hyphenhyphennkUe-r67bsUE8hIHBxJdKl0pAUoBIV6RY-sD2b6yZAfVW/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/AVvXsEh_XSb_iMwIoPLjbyghbeGOe9SZ0sNTG5etQzF-SvFa_5xsx3KRDWmrVQHoemBWFV32jOZ5FpFgp3bvUBoMbnoHy-c4HpOn9hyphenhyphennkUe-r67bsUE8hIHBxJdKl0pAUoBIV6RY-sD2b6yZAfVW/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/AVvXsEi_nDm0e85F6rt_uPBqFigMn053SJqc-BJngIZG32IBcVvghFKDueO3zK4QP5DVA7iHRmnDGiPdW0oObakGr_j_msQoswCKN9HvmNW9hvUwjuLWcsdiWac9OZCAuGjPzIrDdXXI9sBA2fhz/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/AVvXsEiUdU6rZV_Gfe6wOoqhxeRTaBA4bQICKfT_7eQnuDdtHmfx9gMdWIESyOjFH-dKtfDhNj4UZNgbnhyphenhyphenTi7muzW9tXwcJ7NJgCOEvTYcziCzcFWaCfqfw-JZkifQEQi0KhL45w2gilzGOZ-NU/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/AVvXsEggMdDT7czutAOhzPPppcSqbzAgwoZKK8eT_P2asC9tNBN0tmOXniWeOTCC-_um2cGznjoHWYWOwhPwerFzNr_9TV4gHtJM4TEnOAIEyhKqxp4ikgt7tKz34Tw8nUCve0v5Pk6FYVGy09wx/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/AVvXsEj77OlvX_o3eBXWunSEr3_p9lDyA5tCh3AlynARAXLUQy_PnYhR8oY9aawLmzyGU0Mbk7wk8MVNl2EED4aRivXmGuywqfMwBQVV7YuE6St7iy6khQFlffJVVfhd4uTQvIdY1HDqJ8UA8N8t/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE3PKJdnXR2H6dd-Ntu7_Mg_HmT14Z67o9G4k1wM_oKu2SjrHlyvMzAupSyR1SV1GVHZdD0Zp2-smTyl48lbSmhiXbMKOuAFt0IHozHiy2dM-JQqnTO-DW_JjpVcahu68hm47ViQVcW57/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/AVvXsEg234Ytm3DzUjpU3E8d854jXQqIZNpZJTAwd2X2rUv4t9X606asK-n7EfKT8kbSgN21boyE_-sYo4HS-A0HMoESBr7dkFpoH7c6qsljbgueZgNIZuaJnhISazK8OCCM8r57OnqzG3c7vrWG/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/AVvXsEg0n3vG9lhm-Djb6mTBwMk2tZcicPE2gw2sMC4sU4vRfDaCTppBK1qW9qPYQDID6YTtbWILokpPhVeeawq0VxNPdmvZDyAnBOM9BUVrX7C1cydzbVpF8tdE8XO7NPq2xFlnNTrS97Pyeoob/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/AVvXsEg0n3vG9lhm-Djb6mTBwMk2tZcicPE2gw2sMC4sU4vRfDaCTppBK1qW9qPYQDID6YTtbWILokpPhVeeawq0VxNPdmvZDyAnBOM9BUVrX7C1cydzbVpF8tdE8XO7NPq2xFlnNTrS97Pyeoob/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:

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmKzBmwsba1Xwf3dwwcp9xRCTc4K9XinPOTm1_nlsw46KZ2HNx8s-HDt_igqnCe0gq0m5WKQGmGB4BclgNfHRx07wbvjXwgbfZRsK2eKre5sgwo5U18YIV072ET1Gf4sUwsTTn9WtaNAcu/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/AVvXsEjR-khMtDvn_wu3E1iFlzperQ_zp2HwuPTCIO3n8QEijNksqs_Z0-_D8D3DJJnmGsjgSTDM71wRIYRHPRw9-yudUelEdaUY7_fe8Irv8Sun5HilIeMeeI8LxaLdDyh2-9RzfsY96OVqDgnm/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/AVvXsEg4nu4AoqkOuAeUc93sylKLexLgiLO3bTfQnf0WgjnAQShSa6whBd37Eo8XR6dkK7LZYfLsZ8ePrREB0QcUGuFeTi36AJnuecP8DWI4dLyV3MCuzbpAiUOQZ-V9foVdPSeLfDrV3nEybhlD/s1600/down.gif) no-repeat right top;}

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

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

.menu li a.top_link:hover span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp5HxURFkIQj-5ZFk-6w8_FEmfNKgTLEYjpDKk45w_K5KB8JfG6HZHLEV6fK5YSk6daM6myG4WCveoAv8avqVaYHc0_Jypyx0R_IwPf79pvjZPPvxoXwHzuCNuBfjGoPHH8DH0dZRWtS-e/s1600/button4a.gif) no-repeat right top;}

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp5HxURFkIQj-5ZFk-6w8_FEmfNKgTLEYjpDKk45w_K5KB8JfG6HZHLEV6fK5YSk6daM6myG4WCveoAv8avqVaYHc0_Jypyx0R_IwPf79pvjZPPvxoXwHzuCNuBfjGoPHH8DH0dZRWtS-e/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/AVvXsEi2ilK3sBWeUpCCmUNctsZthkbLP169ZbMeQL-P9J_UvrN9594FLqSgfSegZRBIVK9wBIqauFvo1JoEFClRhIVgBh2BJQsuj1l2mI9L3nTDpvIOmu-3urKYqxU72XyynHvgqduNMtYsEiPh/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/AVvXsEjdU2DuTd6146QGjpXlz7JdLErL3NKf1smqFhVGziKp3Dbh6SYbaDe89ZMGY4sUW0un6sArBg6QotfZBHPRBKTE4e456klk-TxePc-wgNduPB1EvpN9H7S4-AHC4OyG7t_G6cbZwbZr0zCD/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/AVvXsEjdU2DuTd6146QGjpXlz7JdLErL3NKf1smqFhVGziKp3Dbh6SYbaDe89ZMGY4sUW0un6sArBg6QotfZBHPRBKTE4e456klk-TxePc-wgNduPB1EvpN9H7S4-AHC4OyG7t_G6cbZwbZr0zCD/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:

CSS CODE:

.bg {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4IbZ4nbEAYAJVfN4znupmvMK_vP8oqTLB9gtzoYrrIEYEIrLt0YbjF9Ja1Vfcr6kuPIBnkX-LEsi4RqTivOqCBQ1G57DqtClITb5kTBWy8f85K6IWkNkhdj7kneSdtB8OTqMm9Qhs1aFs/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/AVvXsEi1euECVjsDzZB88D8T3rDm8W4bqao6S31yBdBg6zXPVHcRms9f3Atb7KFQTtDLRMmvvkINpZdiJQzleIMuoO7bJeCrb4LBNtf3EzRJFZ7Uqj9jR2-fwYKeuZKxnxYYIEoiN3_DVbXOd4NT/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/AVvXsEjatWFFO4-1U8O4UBRLzJrcJZi_Q1UH7Y0XhiBYf3C_rojJxkFKtyN-6H1dY1jFC7NumOassYDxfkhj-jF-yvTH4f8HmxbPb-yhkmUp17Ay2Cb5EM8f2NA2IsfPnFSRVKRLM0tZAkstFjut/s1600/down.gif) no-repeat right top;}

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

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

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

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

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

.menu li:hover > a.top_link span.down {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIalrjYkdeOa0oR7whmoCh37BjBtqxNfSMMc6qzFNFvbg_-YDS37s8XO6kpLC2lRmukid1UkQAGV6BOmStHFzQnWBOslc-1lBZYdu1_YqEwYaoccMIJ1Yowb5cNsXqrvNtyjq73Nm9fzKg/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/AVvXsEiftK-YvOu5MRQAYATadiMD0zMUb-3iJMzfsfBs65OAcYk6h5wGjXAN55Yvk4W0I4WLA9K5dGvZ3NEcleNuUFoEdiJ0wAlu1uKC6cNby830vc9kKHqp0y4U6m3-hc3Af93aSKt8g96h-lbr/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/AVvXsEgfWepNQFpGlAq6pYclU1DWOBuSmKPSw6fa3FPU-7n48Em1FiLO3hyphenhyphenyK3-VXMjrU7SYEgzI7DN4A0QQ5ir2C-5H1yA8OUhB8il61TECU5zWhyphenhyphen8A0ReYb64KIbkDQ5V5ufdffi-KC_Bl_6ZJ/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/AVvXsEgfWepNQFpGlAq6pYclU1DWOBuSmKPSw6fa3FPU-7n48Em1FiLO3hyphenhyphenyK3-VXMjrU7SYEgzI7DN4A0QQ5ir2C-5H1yA8OUhB8il61TECU5zWhyphenhyphen8A0ReYb64KIbkDQ5V5ufdffi-KC_Bl_6ZJ/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:

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/AVvXsEiNCYHkJTEEqeQN6s3nqpfLmw3SbVhm-V3S3N6n4H0BanjPe-46YfjjAgoxPNg5WcoulFzTn257bSia2PSD5arKnGJY5oh7A4u3yD_Q_VLDpt9Ap1mFbLk3Dxer_Emx51I-mZZzxvY61Uv9/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/AVvXsEh2lGH2x1lHATAraKWsobnQuEnfT9i7__ObYXFja_Jp0J9QvfgRLxQ2e4QTPmeZ3NqT7iSyk0qg9T0Z77wrWfgutSA3o7OHuHi8quJgMuDuQjRMhXUPL8ZlJU-RzvN1mbtxv_L94BEnpW4j/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

9. Yellow Tabbed Drop Down Menu

HTML CODE:

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/AVvXsEipxs0nXpDw_AD6xtu3rECPUlj5T824BKq7xBu3ggEyZLlrRMGC5U26vGDKYixBXoYJQL9CK_1sI70oUBclz3GP_IyRHrabES147NTrYp-pG5tocYWbBCsreuO5z2PqoWIBlLNpkmE7ozUd/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/AVvXsEhR96yk80LLuMBqs2bMuCLFMm0PZF8rI60jCdktM7dc42cGy__KgR7RIeSh5X0gbgCCnQlG4v_JvuA8ng8JPTp4mqz_KYeQqyLnYmljahpn68B6AePUl4Rerf-9JqecBD0xV2D4A-zrwK1I/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

10. Tabbed Grey Drop Down

HTML CODE:

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/AVvXsEj__HnTIHnlBbMuaUrYn5oqzXzk4_MH-U4AAtZEeHO_rVG1xkkYJ8vGtQ9fqK__XISoEpD92MbrXopm5rc0GpuyejoAhNeJRNSzEUxlKgeO2vwW6xj4CHwOT5kNb8i88TZ-zPRyno1xT_M1/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/AVvXsEipr-h0C9VLpcPNcMU1uHr_-QdVgUGneBz_Z3R3Emth7UkX5bmuskjxbFOrzQ-mCGZkVqNn5XRz9sxi6Ws701UiRui3_GACfeQdnISjhxMDCDXI11TiK0fDDrwQmjHexT6KYD_K566saNtd/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

11. Red Tabbed Drop Down

HTML CODE:

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/AVvXsEg_NQQw5K5zpX7GoCISSYFUZGJqPH1T79BdPKQpUmPi-tSyQcqMN7zwei-F1HLGjFb4NVKQZtNa0e1lWzlqgVEEowCaVsKo7V-MrvVVXk0L5GlmOGs2olnM2XoekuHPukuQbHb8_NNd39Mx/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/AVvXsEhIOTkbGRIKoh_H7dKhnO6TV6_nYlMa6FJObsiDFYxcqS_xgnzjixzfLmkKcTl2I3p5S0nTMDSGydURThhBHIq4sOPHwJhRtt5Nrx-rqySGD3VvbgS1_Lz8T9CYPpNadmIkMVlIMEwczZP2/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

12. Black Tabbed Drop Down

HTML CODE:

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/AVvXsEhHmNoRW3JM_zLrZZZoaASUx4-G5EAk2FSUimfYNi_1CdOeGPfv2RIw8TQGESqkuuz-sIC9xHuI5A2yzomvNNbIQ4cJB5X5qOgUsA6rBaMtSl6CTPFLizcqJUyedMf78KiG32YbC2eQT1wO/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/AVvXsEjlGg71HKAfHZ2NWiXwlYcF9omITia5lnYl2tuVlX0IGVY9gTFy2QQ1rCKYpgkzQuqoAKSC_wCMMss2rOYDnOgLLFlDn7KvY7qNRaYYPE24cYRewEnmemn0x7mGpv7JSl1n_yE-o9XodjU7/s1600/current-bg.gif) top left repeat-x;

color:#ffffff;

}

13. Orange Tabbed Drop Down

HTML CODE:

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/AVvXsEhp1uho01twvvTONOd7KI22SPuuIEdxbLaOh4Hw0OobJXrcE2SenQ3tmYGZO-FLwVeAwD5ULSQloAvbKXqc3irvbNTeB6JwqYak8VvpjfUfkmK17TmDphFZkiZ682_Ys-hswT34mg29AMGT/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/AVvXsEhqy7EiKKFIwNBQfLcUC9lnFtrJiJftTeMcVYxTQtnR8LMPgPVNTZ6fCpQhJt1W2JNn45Fn0IZSfWNAOVzHzYoq32ayPtSIvgCo0B-unbnZ5OJ_vKDcS4p7onw15kdlQ0b0dEL1w4nRnwo2/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>»</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>»</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>»</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:

CSS CODE:

16. Simple Blue Drop Down Menus

HTML CODE:

CSS CODE:

17. Simple Green Drop Down Menus

HTML CODE:

CSS CODE:

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:

- 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/AVvXsEhgKTulXsv7DcyTLHnqvI1-I4WcZlM8APv0drGWI18-OGTdgJ5D67tPkCbZJPDC_h9fyglMuud7iXjjQm2OtYDQZ-wdgf-6WVMeBUa5E-c5CocMXk-khcvV6OP7Dn7rJOCSSqwwQLj0ybOl/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/AVvXsEjKWEN2V__gmy8TxCynFPB05BZzP6NDoL7C_eKdGbuG7T9e1T8IN2_1T8EQKrJCzXXFxvj-97uOcTMQ2J_lRHGtUTqZEZy_nYoD4h50B0fSy_qac4kxfr8M8X70w0btQ3pC_Tk5g8-giBaO/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/AVvXsEhnwQHe6DN_G9pFxywkWz9ik-wJM60O2D4Lewiqb_h-wwljW_pP1FRG7tcRjsuzzEkDjNEE8XrEcszHW7EyTCYL7VMRJ1fsB3Ly9lFDXVYOO2uY6znsqiUG4qcM-H9IPnHmNzK1RzVvraj6/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/AVvXsEgIhkMFMDlWTSeNSxWx3OMd7Pka0fpdsNV6HYBhJjCykMx_VERaRhcNxmkQ532TuaqD-w8DqtLbx27aoc51YWKEux2y0BhZFx59p6w8V9Hf_Aiul2TgE-CUPfsfKsHzZbdf5hBJ1IeSJ74E/s1600/hover_sub.gif') center left no-repeat;



border:0px;



color:#ffffff;



text-decoration:none;



}



.menu p{



clear:left;



}

ေက်ာ္ေက်ာ္မိုး(နည္းပညာ)

22/04/2012

menu cssလုပ္နည္းေလးပါ

MTMLCodeမ်ားblogsသမားမ်ားအတြက္ပါေဖၚျပခ်င္း