Cara Membuat Menu Dropdown Warna
Saturday, November 17, 2012
Edit
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>
Kemudian save, dan masukkan kode HTML berikut ini :
Oke,,cukup sekian tips blog kali ini, Cara Membuat Menu Dropdown Warna.
Semoga bermanfaat
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/AVvXsEie2ElLonBCdKwDCWi6bFhS40Ki6TSPOOy-SFpIo37xExdspEjKB89W-1u-XiUO9rn6Yh7bVz27hONkPxHO0-gaKerxgR0CxtZn67nvjhqfof4ueRhpIwMGhnIL-utkp0uTgo0ts2-K-to/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/AVvXsEg1AHVOvDKFa43LWzkqXGgTWD32dvHD8iOInv88r_5lj8-s5f6JA61jOVqWQFxfe0RD1Mv80L26qMm9YIT2x1eFn2E7U_qWm5LPnzW5JirNuA6OHGdpsoqbAQPpzb99RmOacEIlCDq48uo/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/AVvXsEgz170MIujhGTMVa7ISEGfh24rMOHdJPFg64KWoJoykk2HFkbEWziatuOe3zINWbuH5Py9SIipEmhjp8j2JCiR34ewHmTF6lhQ0iVKZhShOH_DLkE_FKrzQqsQHeW2z-G0y-zjIM0txbJ8/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/AVvXsEjmd81Q20rqQLGJlHsZRWNQvS8P6xzYQ_5zkQk-2KI2ALlgCe4Mwfgwmz9yNsN3QQ1G7-K0k057e91fgHQB3e2xUDcsOmFKJITa13Ybojsj-piRKUwqiMHpe-nqxcSSXCbjJ2P0z9W0tPc/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