Cara Membuat Menu Dropdown Warna
Satu lagi nih sob tips blog cara membuat menu dropdown di blogspot. Menu ini mempunyai warna yang berbeda di setiap masing-masing sub menu, total terdapat 8 sub menu. untuk demonya saya tidak menyediakan live demo, jadi sobat lihat gambar ini saja.
Masukkan kode berikut sebelum ]]></b:skin>
#css-menu {
background-attachment: scroll;
background-clip: border-box;
background-color: #FF7E00;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimu_y-uXIN0NlRZ9Mf3MDuGitMcod7Vvk-CjJL_gknLN_xn5nIegUaekvNpHK6-_IYxm6eI7vNaGuItczi1r6MJDXgckbttz7Be8wjhBVmrZFRiJXHC3norVpglOFijvCyuPKCGPn2Rrg/s26/bg-nav-foot.jpg");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
height: 46px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.nav {
float: left;
height: 26px;
line-height: 1;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
z-index: 99;
}
.nav a {
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
color: #111111;
display: block;
position: relative;
z-index: 100;
}
.nav li {
float: left;
margin-bottom: 0;
margin-left: 0;
margin-right: 5px;
margin-top: 0;
}
.nav li a {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-x-system-font: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAl_-p7wpdpO_YXPZxMcLZyI29PF4kuQkCl8SkXz88iUWy6gElp8QpP0xPdqLl-rkpD5Do98BI8cvNGRGpJIMCkp0X0Lm1sVDs320aNMayOFEJxv1_97_hRbHllBsbgpCYieb99ur5vdE/s48/li-right.jpg");
background-origin: padding-box;
background-position: right top;
background-repeat: no-repeat;
background-size: auto auto;
font-family: Arial,serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: 15px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 0;
padding-top: 6px;
}
.nav li a span {
color: #FFFFFF;
font-weight: bold;
padding-bottom: 4px;
padding-left: 0;
padding-right: 12px;
padding-top: 5px;
}
.nav li.current-cat a, .nav li.current-cat a, .nav li:hover a, .nav li a:hover {
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
-moz-text-blink: none;
-moz-text-decoration-color: -moz-use-text-color;
-moz-text-decoration-line: none;
-moz-text-decoration-style: solid;
-x-system-font: none;
color: #FFFFFF;
font-family: Arial,serif;
font-size: 12px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 15px;
margin-bottom: 0;
}
.nav li:hover span, .nav li a:hover span {
font-weight: bold;
}
.nav li.current-cat a {
background-attachment: scroll;
background-clip: border-box;
background-color: #111111;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixPVVhfIEIO8iQoAWu5X4KJwbeSAJYCWzRyYj4Uh58pyuoR2bdYVQGzEHfzlmvI29r2pgBa2k0Q_VMTP85dVpD12fKutd5zFRcPPI2eg3pR6r1p9p9AAOtk5gl6FJOrHC5PBzR5z9GsCY/s101/hnjn.gif");
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: auto auto;
color: #EEEEEE;
height: 16px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: -1px;
padding-left: 10px;
padding-top: 7px;
width: 100px;
}
.nav li.current-cat a span {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5TWxNb7I8iZw6v83_IPlvho58xRekts7jf_7vaiaGTEXUvNyDavXRNcZVIpdH0T7i0mMGq972YB6M7pgqGAMZiiyLJn90DAYx8GKtLuZJJk8BqvaQ5vT3nGZf8C4omiMhNin3SVNxGLc/s18/hbhjs.png");
background-origin: padding-box;
background-position: 0 center;
background-repeat: no-repeat;
background-size: auto auto;
padding-left: 20px;
}
.nav li.news:hover, .nav li.news:hover ul {
background-color: black;
}
.nav li.news1:hover, .nav li.news1:hover ul {
background-color: #017CB5;
}
.nav li.news1:hover ul li {
border-bottom-color: #014F73;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #038BCA;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news2:hover, .nav li.news2:hover ul {
background-color: #A92267;
}
.nav li.news2:hover ul li {
border-bottom-color: #701544;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #C72B7B;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news3:hover, .nav li.news3:hover ul {
background-color: #0F5594;
}
.nav li.news3:hover ul li {
border-bottom-color: #0A3963;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #166BB7;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news4:hover, .nav li.news4:hover ul {
background-color: #693770;
}
.nav li.news4:hover ul li {
border-bottom-color: #45254A;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #9A52A4;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news5:hover, .nav li.news5:hover ul {
background-color: #3B6A06;
}
.nav li.news5:hover ul li {
border-bottom-color: #264404;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #4D8909;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news6:hover, .nav li.news6:hover ul {
background-color: #46505C;
}
.nav li.news6:hover ul li {
border-bottom-color: #252A30;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #5C6978;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news7:hover, .nav li.news7:hover ul {
background-color: #1B227D;
}
.nav li.news7:hover ul li {
border-bottom-color: #10154B;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #212994;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news8:hover, .nav li.news8:hover ul {
background-color: #9A1313;
}
.nav li.news8:hover ul li {
border-bottom-color: #650D0D;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #B81919;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news9:hover, .nav li.news9:hover ul {
background-color: #A92267;
}
.nav li.news9:hover ul li {
border-bottom-color: #741847;
border-bottom-style: solid;
border-bottom-width: 1px;
border-top-color: #C52C7A;
border-top-style: solid;
border-top-width: 1px;
}
.nav li.news1:hover ul li.first, .nav li.news2:hover ul li.first, .nav li.news3:hover ul li.first, .nav li.news4:hover ul li.first, .nav li.news5:hover ul li.first, .nav li.news6:hover ul li.first, .nav li.news7:hover ul li.first, .nav li.news8:hover ul li.first, .nav li.news9:hover ul li.first {
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: 0;
}
.nav li.news1:hover ul li.last, .nav li.news2:hover ul li.last, .nav li.news3:hover ul li.last, .nav li.news4:hover ul li.last, .nav li.news5:hover ul li.last, .nav li.news6:hover ul li.last, .nav li.news7:hover ul li.last, .nav li.news8:hover ul li.last, .nav li.news9:hover ul li.last {
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
}
.nav li a:hover, .nav li a:active {
color: #B80000;
}
.nav li ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
left: -999em;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0;
margin-left: 0;
margin-right: 1px;
margin-top: 0;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 0;
padding-top: 5px;
position: absolute;
width: 168px;
z-index: 999999;
}
.nav .last ul {
background-attachment: scroll;
background-clip: border-box;
background-color: #FFFFFF;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
margin-bottom: 0;
margin-left: 1px;
margin-right: 1px;
margin-top: 0;
position: absolute;
width: 168px;
z-index: 999;
}
.nav li ul li {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
border-bottom-color: -moz-use-text-color;
border-bottom-style: none;
border-bottom-width: medium;
border-image-outset: 0 0 0 0;
border-image-repeat: stretch stretch;
border-image-slice: 100% 100% 100% 100%;
border-image-source: none;
border-image-width: 1 1 1 1;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
border-left-color-value: -moz-use-text-color;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-left-style-value: none;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-left-width-value: medium;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-right-color-value: -moz-use-text-color;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-right-style-value: none;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-right-width-value: medium;
border-top-color: -moz-use-text-color;
border-top-style: none;
border-top-width: medium;
clear: both;
margin-left: 0;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
width: 160px;
}
.nav li ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
color: #FFFFFF !important;
font-size: 12px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
padding-top: 0;
text-transform: none;
}
.nav li:hover ul li a {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
font-weight: bold;
}
.nav li:hover, .nav li.hover {
position: static;
}
.nav li:hover ul ul, .nav li:hover ul ul ul, .nav li:hover ul ul ul ul {
}
.nav li:hover ul, .nav li li:hover ul, .nav li li li:hover ul, .nav li li li li:hover ul {
left: auto;
}
Kemudian save, dan masukkan kode HTML berikut ini :
<div id=css-menu>
<ul class=nav>
<li class=current-cat iconhome><a href=/><span>Home</span></a></li>
<li class=news1><a href=#><span>Css menu 1</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 1.1</a></li>
<li><a href=#>Submenu 1.2</a></li>
<li><a href=#>Submenu 1.3</a></li>
<li><a href=#>Submenu 1.4</a></li>
<li><a href=#>Submenu 1.5</a></li>
<li class=last><a href=#>Submenu 1.6</a></li>
</ul>
</li>
<li class=news2><a href=#><span>Css menu 2</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 2.1</a></li>
<li><a href=#>Submenu 2.2</a></li>
<li><a href=#>Submenu 2.3</a></li>
<li><a href=#>Submenu 2.4</a></li>
<li><a href=#>Submenu 2.5</a></li>
<li class=last><a href=#>Submenu 2.6</a></li>
</ul>
</li>
<li class=news3><a href=#><span>Css menu 3</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 3.1</a></li>
<li><a href=#>Submenu 3.2</a></li>
<li><a href=#>Submenu 3.3</a></li>
<li><a href=#>Submenu 3.4</a></li>
<li><a href=#>Submenu 3.5</a></li>
<li class=last><a href=#>Submenu 3.6</a></li>
</ul>
</li>
<li class=news4><a href=#><span>Css menu 4</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 4.1</a></li>
<li><a href=#>Submenu 4.2</a></li>
<li><a href=#>Submenu 4.3</a></li>
<li><a href=#>Submenu 4.4</a></li>
<li><a href=#>Submenu 4.5</a></li>
<li class=last><a href=#>Submenu 4.6</a></li>
</ul>
</li>
<li class=news5><a href=#><span>T�n menu 5 </span></a>
<ul class=children>
<li class=first><a href=#>Submenu 5.1</a></li>
<li><a href=#>Submenu 5.2</a></li>
<li><a href=#>Submenu 5.3</a></li>
<li><a href=#>Submenu 5.4</a></li>
<li><a href=#>Submenu 5.5</a></li>
<li class=last><a href=#>Submenu 5.6</a></li>
</ul>
</li>
<li class=news6><a href=#><span>Css menu 6</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 6.1</a></li>
<li><a href=#>Submenu 6.2</a></li>
<li><a href=#>Submenu 6.3</a></li>
<li><a href=#>Submenu 6.4</a></li>
<li><a href=#>Submenu 6.5</a></li>
<li class=last><a href=#>Submenu 6.6</a></li>
</ul>
</li>
<li class=news7><a href=#><span>Css menu 7</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 7.1</a></li>
<li><a href=#>Submenu 7.2</a></li>
<li><a href=#>Submenu 7.3</a></li>
<li><a href=#>Submenu 7.4</a></li>
<li><a href=#>Submenu 7.5</a></li>
<li class=last><a href=#>Submenu 7.6</a></li>
</ul>
</li>
<li class=news8><a href=#><span>Css menu 8</span></a>
<ul class=children>
<li class=first><a href=#>Submenu 8.1</a></li>
<li><a href=#>Submenu 8.2</a></li>
<li><a href=#>Submenu 8.3</a></li>
<li><a href=#>Submenu 8.4</a></li>
<li><a href=#>Submenu 8.5</a></li>
<li class=last><a href=#>Submenu 8.6</a></li>
</ul>
</li>
</ul>
<div class=clear/>
</div>Oke,,cukup sekian tips blog kali ini, Cara Membuat Menu Dropdown Warna.
Semoga bermanfaat