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/AVvXsEhpAnjeqicOK-DbihWslEa5Q9-fyT7U-6PPoiLXJMV_vUNyhcFfkrklupUL554zkc0wmTYForJFsUyRgTy4jH0UAXLioFW6WkkEIeNcVtnxYfZf_AwaGxNU_6Mpe64p_ZT72EUd8ebbwKo/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/AVvXsEgKUYybKGmVDVdj94zHUp6q3zFME12yzRI8NOfysp2THnV0KeaeHEe2oUcAY4ockzJ6ibH2AUg9V-VZ4MDxUza6cz6_iveLK92jHVMiBVe7XcTOaI8Jxz71qYEyGnpZ9LD_fuhTUU6wqyU/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/AVvXsEiTPReF0EIc1kl6RVoo5tLbSoPDewWdzPoaWYB_zoaTaNWREqeiC0s774mB-OtRf4-N80ci9Lo8miD_bN8Pb84_tQ7yr_MGgk71qNCjSLN_01Wzc9gJhJmRRNPUlS7_RAuE92p2uHe1PEU/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/AVvXsEgC5zc-oAkX02Al0s0YP4VpOiAb4jtgB19ayQaCRcFVjXfeuNkdi5-gnke8cNR5nmaa2vNwXUD5uikcqs0iJQrC2BfTnhmTh0X7ee3U88YVMJgatEFOlsJ0VWl5dKLNsA3ghfqkC323KEw/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
0 Response to "Cara Membuat Menu Dropdown Warna"
Post a Comment