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.

Cara Membuatnya :

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/AVvXsEhHAWzbujOBgrVbmYYn_0RIGSimnmJXAqZQ-Ls_8NQlwsCAusbbC1nvn30ODq-z2U8n91GMbjAzWglU_1QGfSpAZUXyba85moFHZARtxcQhX9_bbcaDCZVlMzJqUZjr41HTzzgynNPMMzA/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/AVvXsEgFewWT5e2BCTkSVSXs2Kdj61LbwSDZ_XQqq4TldabDWsNGDH_5lmBE5nOAI8ubap50X1i1taYsDx_Og5xGmhpDdInXEP_UEUH0xglXf1KJJJmcGWi22V1AtNAkdg2bowbSII0hl5J1C1w/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/AVvXsEg5-yqrQbzif84DaS8dAEHKXNOJRrrehz5hfPr1viAreJh-SzCff6TT6wR2AReXx2ARuAEgeGehvQYV7CR6dszPYiZqrGycjKDNjPPoMfCjQi2D2pC5C8MVHez-jCsAwCSrskkNYPw1_Vc/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/AVvXsEjTuDh-itM4jAEmlMDERU7FSEZgMAi2TZVkZXIflpbfig7tw6XJA4zC6unFAdjckZfTiXR6Z_GcJQUOIOVmzYIipaz0yKX4LRcq5HmHvhg_FONSipEeSjMnBCE8cJJpyMjIA9H9IzgYDOs/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