Rock Pillbox Drop Down Menu CCS3

Rock Pillbox




Cara memasang CCS kode:

1.Login ke Akun Blogger
2.Arahkan mouse anda ke menu drop down dan klik template
3.Download template anda sebelum melakukan editing
4.Klik Edit HTML

Cari Kode berikut :

]]></b:skin>

5. Copy kode di bawah ini dan paste di atas kode

]]></b:skin>

#cssmenu ul, #cssmenu li,
#cssmenu span, #cssmenu a { margin: 0; padding: 0; }

#cssmenu {
background: #f5f5f0;
border-bottom: 1px solid #939974;
box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
-moz-box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
-webkit-box-shadow: inset 0 2px 4px rgba(132, 135, 100, 0.5);
}

#cssmenu:after { content:''; display: block; clear: both; }

#cssmenu a {
display: inline-block;
font-family: Calibri, Arial, sans-serif;
color: #FFF; text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
#cssmenu a:hover { background: #939974; }

#cssmenu ul {
list-style: none;
height: 34px;
padding: 10px 0;
}
#cssmenu > ul > li {
float: left;
height: 34px;
margin: 0 5px;
position: relative;
}
#cssmenu > ul > li > a {
background: #848764;
box-shadow: inset 1px 1px 3px rgba(20,20,18,0.2);
-moz-box-shadow: inset 1px 1px 3px rgba(20,20,18,0.2);
-webkit-box-shadow: inset 1px 1px 3px rgba(20,20,18,0.2);
border-radius: 17px;
-moz-border-radius: 17px;
-webkit-border-radius: 17px;
line-height: 24px;
padding: 5px 10px;
}
#cssmenu > ul > li.active a {
background: #121310;
color: #f5f5f0;
}

#cssmenu .has-sub ul {
background: #f5f5f0;
border: 1px solid #939974;
border-top: 0 none;
height: 0; overflow: hidden;
padding: 0; position: absolute;
opacity: 0; top: 44px; left: 0;
width: 200%;

-webkit-transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
transition: opacity 0.2s;
}
#cssmenu .has-sub:after {
content: '';
display: block;
padding: 0 10px;
position: absolute;
bottom: -10px; left: 0;
height: 10px; width: 200%;
}

#cssmenu .has-sub:hover ul {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
height: auto;
opacity: 1;
padding: 10px;
}

#cssmenu .has-sub li,
#cssmenu .has-sub li a { padding: 0 5px; width: 100%; }
#cssmenu .has-sub li { margin: 8px 0; }
#cssmenu .has-sub li a {
color: #848764;
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
}
#cssmenu .has-sub li a:hover { color: #FFF;}

Intruksi html:

1.Buka dashboard anda
2.Pilih layout
3.Copy kode yang berwarna biru dan pastekan di bawah header
Catatan:jika anda belum membuat element di bawah header baca disini untuk menambahkan kolom baru di bawah header.

@.Gantilah kode # dengan URL anda.
     Ganti Home dan teks lainnya dengan teks anda

HTML CODE

<div id='cssmenu'>
<ul>
<li class='active '><a href='#'><span>Home</span></a></li>
<li class='has-sub '><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Jika anda mengalami kesulitan dalam memasang kode tersebut tinggalkan pesan atau contact kami