Senin, 18 November 2013

Macam macam Menu Dropdown Pada Blog

Posted on 06.45 by Unknown

Cara memasangnya adalah sebagai berikut:

1. Pilih Jenis Menu Dropdown yang sobat inginkan
2. Untuk pemasangan code Css ikuti langkah-langkah di bawah ini

  • Login ke blogger atau klik disini
  • Pilih template >> Edit Html >> Lanjutkan
  • Centang Expand widget Template
  • Kemudian cari code ]]></b:skin> setelah ketemu pastekan code Css di atas code ]]></b:skin>
  • Kemudian Simpan template

3. Untuk pemasangan code Html ikuti langkah-langkah di bawah ini.

  • Login ke blogger atau klik disini
  • Pilih tata letak >> Tambah gadget >> Html/JavaScript
  • Pastekan code Html
  • Kemudian simpan

1. Massive Blue Drop Down menu

image

Code Html

<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>

code Css

.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/AVvXsEgYu2pbTDm8L3I_7jlZHJLerHN85wPdjJZ9v5eePHdk-Qb3HOXdPdLrfMvJV8jSdzfwFVAA6ga_LyqQJTVWAPUNZUYORcs1XZtXhqLtbe-kwHbNxiB-dZElky7tMSBTp6oo53vVXLbWnBtw/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/AVvXsEgN3TEvHHn8e6JGe6ND2PPUVBD9twnAVnVF1UGq4euRmDyIVP-k4ac_uQ00SWhklFPCmgC07vLgidaFwMUqxcmwL_ZeM8lbdiFOWfxIWB6ANwMGTxlXtIPI5BMp7lB2jaN6oa9OxkZNn4_i/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/AVvXsEiSx-3W4SY_10of9wc7JqF2tSVIRuCjITF_jiZpT5yF2choUzVfakhE6JRwFxldeU81CWzIzG5LV08FfNW2ezn80mMoD6uDSGjv7dsED3RoyhdFeV022q7_-PV_PxMjmlV14UYorlccsqsS/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/AVvXsEirZ4IacpLkDi4QhnlF8kws2ZwiLm0DPaS2tihuSJN-AjNjcx2u92IAYiUadZifn1fDiHHg2B0jYsmN4FmvxljDAlcKMCHcPLTlw8zd9An6B3jmYckirVmEFIWwIS8NtUe7n-vNFNWdAYq5/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

image

Code Html

<div class="nav-container-outer">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJULuWTshJoghqzmDAUfeSFvddmmHeo3Y2J5SHrOndxR4Nt7jVD83asPDNmBAHcXKYZ-6GvzDpkHzxMSc4hY44vLX91iA-GdlJW_cVz-O0cWb9LOzeFyZ6UnzHACCP8agYUUmq7MOiy88U/s1600/nav-bg-l.jpg" alt="" class="float-left" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVb6Ec8e7ba8NKp36BubMY_P165pI0ZFNDL97DFxBrcsDgbHM__jCA4dmmKN8YKqqSXdR5NmgBknntlKml8hHgKQeYD7UVPn-_wlMiTVDrOV6vRiWj2HONAZNpCvsbZBzW8kJRQxw1HFMy/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>

Code Css

@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/AVvXsEgTdh6_nI4-329_skelZq72qc-4dswEjzPm98K57YT9sSgNzMeQl3VeAujvp-slqRbp0Sk8KJeNk2fY4Fq3vTkNCibrJA_jXMkc614oPNjEJ68J35ob6RxJEEXv8rWYN4ro7R4D0vW9UXqW/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/AVvXsEh7xT1XpOp5WOQKVy0IW7rMaPCAXSoooJh9_Ulyx2bYonKoEcmEkjIyUQ0ZodRdjhrRgaEVBbeg8Kk3QgjcCTOqGC4cPtFKymF0K-1qMK04XwsPxiDVePjm6Hd1iv8JULjtjo38Bf1JVFeV/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/AVvXsEh7xT1XpOp5WOQKVy0IW7rMaPCAXSoooJh9_Ulyx2bYonKoEcmEkjIyUQ0ZodRdjhrRgaEVBbeg8Kk3QgjcCTOqGC4cPtFKymF0K-1qMK04XwsPxiDVePjm6Hd1iv8JULjtjo38Bf1JVFeV/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/AVvXsEidvKNHukAhHOuNwiasJOZUfa3SBYOzV4EW-48xw2I24ZeE3rO9yjpWUXOq18795ieB3NrXWe0oKEJypn1F9PUx_Z23A_03GQKEoAG6FIp5B9dt6Wk6NeS5gKtIk-qLNbCzj8MD7Pg7viPq/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/AVvXsEg5kuk8Dp-HoBHApUdAzeEW070I-4Luci7wK3WhBWuM8ZPKMw-R0ob7e7C8SynbVRsvSWGSG4wugCrncXOeb9jUSmy9yYn5M9Rkur_ioZT_t4UcbuXPybRNVb_YA7UWZKRHuWZUYiCZarq5/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/AVvXsEg5kuk8Dp-HoBHApUdAzeEW070I-4Luci7wK3WhBWuM8ZPKMw-R0ob7e7C8SynbVRsvSWGSG4wugCrncXOeb9jUSmy9yYn5M9Rkur_ioZT_t4UcbuXPybRNVb_YA7UWZKRHuWZUYiCZarq5/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/AVvXsEidvZT7PZ8ByCaUfmC_dNgFm8wp1P2rCI0mwCqaVpl94eNtaf32YMEuz84l2D2GMtnq2Wl0xdDhEAnKX2RwG3TR6k6Ilo8o8O008TmwvtqcN8_5PY9E4l8FjurVi6I0FwbP8-INs5VWaiiK/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

image

Code Html

<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>

Code Css

.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/AVvXsEhv9CBv1iKU_jU3BpRQPZaCkLOfAmBbkYUf_Pzm5czFdydX-peJ2cUPkbIqEfcNOVjFx8PBeaXLSdxkYaQ4StcROCAktMB-wkG3bj_JF1845bELqulbz_L61cQrQAPagkmtATm_pNB0UBq5/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/AVvXsEiP3SsJwRbg9HDX9PPxv4meUS-AvoROaaN530GuCwq0OCJxJE-y3gG1NyEgQSMOYQe11HBa6iutJVlgk2dm4US74qzCRbijUr7eLazBFs6GajV3ohJvqxlVsyCb3Dtlo7yCpXn3irAQG5hF/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/AVvXsEhPDDjGkUL3N8D6f0r_CtL0etVMWm5uDkJsQfDM7jouVTtnDcFg2Qx3pNOutvNZp3NLtOIK_-g4NFdQIh9NPDt0uGi7hg_87M1nkwad3jbJWmQa_sLE9THNj3i9MwSgYImqjsJd8HGXmISn/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/AVvXsEjr9IyaeqMEjE5QgFGbEXNqN2v8jUeUgSkifhV_ggUk1Yv02EOOfJNIGVX_nuj7Hc2RAtuvTDHmk97Y9-0-P-GOwKmDQEFocqUDC_dw25NyDFATgIOEGQOalyNe0zzSZAfyr8eDZ5T_a_zJ/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/AVvXsEhDKWIKFEswe-71r6P3VgrbTzeKyjxM61US5MRRiuFEwK5h0k1HUhyphenhyphenrDLs7XczjAQPpkp6uUZtbSZ__rk-YB0wJeuMoqdeCZBcEKeSBORwv3NQEPk7Z7LR9J9mhkCQUto0F9BiN_fUkiCHl/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/AVvXsEiXZ2CfHq5y1I-b8JcekXeYghgi1-WFbwqYmNpX5gxeass_wCOPccuf3GdMzKLrpGlyeoL6MGf8gFZn2OK6bBjsOw6drTN5IHaPT1afN7kvBpeWPr2vuBxOjcWQzCRT6Jphgvn34lI_uN-6/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/AVvXsEh20_0sMEqWidUXnkMtp8SD0MbfMyKRdCJV5IDZCNw-LUFrBsOlXIsHPFBjUP6o_SmtHPNeXL27UpV10krf5fhkp4czivJUtyAseNY023wRGXX1bh_je-MZU3YjGWc7GYYsditAq4CIdQRO/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/AVvXsEh7TQU5RGgvohudFxnn3o-tmJWXgdgNC4PzRHryF_89ceNcdhdfB2YCEeBCmg7JWYvOu1rUhgXFpbivUh7TY9br5yHUbag1FC83voNJsCHbBuG9I3e6Sk25ovrq13judJYMp1q8kpkEi1-0/s1600/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;
}
.nav li ul {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7Zs4L_XLbQXytM27a7W7_X50hkdSh_fPYwR15H2QjuKLK77U75wDm4M81TJm4822EhyE_Pjz93T0lx45D5j4Mizk7PGM3aclKCXoAY8rIDp5J2_X4RqdzjzeAyNYU-atvl3hMrrNjy8C/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/AVvXsEjrh_3oKeCRnVezzVLNdTXZLvXlUkeLbKOX_46wsXkuS-tfOUpZ5df-KXvb1cvd7uL2pJJd24hL9rZqKqoN352tWvLIW7OIEe9gUhS2BgkB9GLUImDDJiJjMKSWZc7BL5o7cz0ROwbYSxc9/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/AVvXsEidZqQQNyXudL554Uo2O6pBTp6ptqmYdrpxhireOfiUA0zSzZIkXqL_tL9fT4X-f1yralrJrriMOagMf6WwOlzV5tBRq1vapWz5JSitzs9svbIqjS1s_MOjpWM-PpEcBQGPjBm0lRZOnvEK/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/AVvXsEj4cw-2idfSDa8b-z5ukPh1-0p0QtTLEqNzs9wVaOTb1jtfGA5669DW45fnUA8WLXPFyiyiW5jMa6qV9Ye8a8D-ogpOO5J1uSQm3RF7dsBFdhO15I5Vg7fuhoTv3xwDdJ6b1HLO4fKqDKBg/s1600/content_bottom.png) no-repeat;
height: 13px;
float: left;
}

Next

This entry was posted in , , , ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)