blogBLOG UNIVERSAL

dd MENU-CSS HORIZONTAL

Dropdown Menu - CSS

(HORIZONTAL)


Langkah 1:
Buka Template > Customise > Advanced > Add CSS dan masukan kode yang ada dibawah ini ke dalam box:

#menucontainer {
height:33px;
width:1000px;
margin:0 auto;
display:block;
padding:0px 0 0px 0px;
font-weight:normal;
border-top:1px solid #252424;
}
#menu {
margin:0px;
padding:0px;
width:1000px;
background:#252525;
height:33px;
}
#menu ul {
float:left;
list-style:none;
margin:0px;
padding:0px;
}
#menu li {
float:left;
list-style:none;
margin:0px;
padding:0px;
}
#menu li a,
#menu li a:link,
#menu li a:visited {
display:block;
margin:0px;
padding:9px 10px 10px 10px;
}
#menu li a:hover,
#menu li a:active {
color:#fff;
margin:0px;
padding:9px 10px 10px 10px;
text-decoration:none;
}
#menu li li a,
#menu li li a:link,
#menu li li a:visited {
background:#ed4a05;
width:150px;
font-weight:normal;
float:none;
margin:0px;
padding:9px 10px 10px 10px;
border-bottom:1px solid #ff7800;
}
#menu li li a:hover,
#menu li li a:active {
color:#fff;
padding:9px 10px 10px 10px;
}
#menu li ul {
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px;
}
#menu li li {
}
#menu li ul a {
width:140px;
}
#menu li ul a:hover,
#menu li ul a:active {
}
#menu li ul ul {
margin:-34px 0 0 170px;
}
#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfhover ul ul,
#menu li.sfhover ul ul ul {
left:-999em;
}
#menu li:hover ul,
#menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfhover ul,
#menu li li.sfhover ul,
#menu li li li.sfhover ul {
left:auto;
}

Langkah 2:
Buka Layout > Add Gadget > HTML/Javascript pada Blogger, kemudian masukan kode yang ada dibawah ini lalu tekan ENTER.

<div id='menucontainer'>
<div id='menu'>
<li><a href='URL-Here'>HOME</a></li>
<li><a href='URL-Here'>Link 1</a></li>
<li><a href='URL-Here'>Link 2</a></li>
<li><a href='URL-Here'>Link 3</a></li>
<li><a href='#'>Link 4</a>
  <ul class='children'>
  <li><a href='URL-Here'>Link 4a</a></li>
  <li><a href='URL-Here'>Link 4b</a></li>
  <li><a href='URL-Here'>Link 4c</a></li>
  </ul>
</li>
<li><a href='#'>Link 5</a>
  <ul class='children'>
  <li><a href='URL-Here'>Link 5a</a></li>
  <li><a href='URL-Here'>Link 5b</a></li>
  <li><a href='URL-Here'>Link 5c</a></li>
  </ul>
</li>
</div>
</div>