CSS MENU HEADER

kali ini aku borongan aja ah...
bikin menu header with css
laku ga laku biarin aja , lumayan buat arsip sendiri..xixixixi
kali ini mainya javascript dan css
langsung aja ke TKP




pertama cari kode </head>
kemudian paste kode berikut ini sebelum / diatas kode </head>

<style type='text/css'>
#catmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVB1E5R05xNZOIxIsCkysnqeQE1iQkBmFshHmeKyYMNXUpwAGpSCVetgipMh4Rn7-OQsQ8BLofQBV4VJpVC0KGison8URxNxBplv4LAm7xvpnpoEmXjytuQijf8w5mbbqtsSEzAbl5oYF4/) repeat-x;
display:block;
padding:0px 0 0px 0px;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
border-top:1px solid #686D6F;
}


#catmenu ,#catmenu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}


#catmenu a {
color: #999;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}


#catmenu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDd-sCC61vXXUoa5W1BGCOn3cnAsF1Az7IMGQOPGSLxauwrFvpVSJJTNO-V0NZ0K_wvFY_VQ-N7C9vn7RM69ec9eUVsGUBJqwimYb17J4EzUkx1KqPEydFoniscxq71wUmS1uAgwyLx_7/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}


#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}


#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}


#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVB1E5R05xNZOIxIsCkysnqeQE1iQkBmFshHmeKyYMNXUpwAGpSCVetgipMh4Rn7-OQsQ8BLofQBV4VJpVC0KGison8URxNxBplv4LAm7xvpnpoEmXjytuQijf8w5mbbqtsSEzAbl5oYF4/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#E8EBEE;
border-bottom:1px solid #2C3133;
}


#catmenu li li a:hover, #catmenu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuDd-sCC61vXXUoa5W1BGCOn3cnAsF1Az7IMGQOPGSLxauwrFvpVSJJTNO-V0NZ0K_wvFY_VQ-N7C9vn7RM69ec9eUVsGUBJqwimYb17J4EzUkx1KqPEydFoniscxq71wUmS1uAgwyLx_7/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
border-bottom:1px solid #2C3133;
}


#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}


#catmenu li:hover ul {
left: auto;
display: block;
}


#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
</style>

step kedua masuk add gadget
masukan kode berikut ini

<div id='catmenucontainer'>

<div id='catmenu'>

<ul>

<li><a href='#' title='#'>Home</a></li>

<li><a href='#' title='#'>Web Design</a>
<ul class='children'>
<li><a href='#' title='#'>HTML</a></li>
<li><a href='#' title='#'>CSS</a></li>
<li><a href='#' title='#'>JavaScript</a></li>
</ul>
</li>

<li><a href='#' title='#'>Templates</a>
<ul class='children'>
<li><a href='#' title='#'>1 Column</a></li>
<li><a href='#' title='#'>2 Column</a></li>
<li><a href='#' title='#'>3 Column</a></li>
<li><a href='#' title='#'>4 Column</a></li>
</ul>
</li>

<li><a href='#' title='#'>Subscribe</a>
<ul class='children'>
<li><a href='#' title='#'>Email</a></li>
</ul>
</li>

<li><a href='#' title='#'>News</a></li>

<li><a href='#' title='#'>Google</a>
<ul class='children'>
<li><a href='#' title='#'>Yahoo</a></li>
<li><a href='#' title='#'>MSN</a></li>
</ul>
</li>

<li><a href='#' title='#'>About</a></li>

<li><a href='#' title='#'>Contact</a></li>

<li><a href='#' title='#'>PrivacyPolicy</a></li>

</ul>

</div>

</div>

untuk editing link cukup anda ganti kode yang berwarna merah
untuk judul tampilan cukup anda ganti kode yang berwarna biru
kemudian pratinjau / preview dulu
tapi dengan catatan yah...
sebelum nyoba ngedit template anda
terlebih dahulu backup template anda takut terjadi eror aja...xixixixixi
step terakhir simpan hasil kerja anda.

Baca Yang ini Juga Ya... :

MENU HEADER

• Membuat Menu Header Unik
• TAB MENU HEADER SEDERHANA
• MEMBUAT CATMENU HEADER
• MENU HEADER WITH CSS