Cara membuat menubar di atas Header

Langkah pertama ialah,anda harus membuka langkah-langkah yang akan saya simpulkan di bawah ini.

yang pertama ialah:
Login ke blog sobat.
Edit Elmen pada HTML anda.
Carilah dengan menekan Ctrl+F  yaitu Elmen ]]></b:skin>
Dan tempatkan Elmen di bawah ini tepad di atasnya ]]></b:skin>

#catmenucontainer{ height:33px; width:962px; margin:0 auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-tkfFzlxEkIlR_x_iVZQQdUpfVh1RiuuwG3BiBWgmug4m-gsllvFCvHFrTcHbFupBfqSMubCZtL8Z6dBllGV3NLrUm_9MrfWPvue4p31uBdazXc6qbIZwZKHVOF2g_C4q5HJZ5vW2Ovt/) repeat-x; display:block; padding:0px 0 0px 0px; font-size:12px; font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif; font-weight:normal; border-top:1px solid #252424; } #catmenu{ margin: 0px; padding: 0px; width:962px; background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-tkfFzlxEkIlR_x_iVZQQdUpfVh1RiuuwG3BiBWgmug4m-gsllvFCvHFrTcHbFupBfqSMubCZtL8Z6dBllGV3NLrUm_9MrfWPvue4p31uBdazXc6qbIZwZKHVOF2g_C4q5HJZ5vW2Ovt/) repeat-x; height:33px; } #catmenu ul { float: left; list-style: none; margin: 0px; padding: 0px; } #catmenu li { float: left; list-style: none; margin: 0px; padding: 0px; } #catmenu li a, #catmenu li a:link, #catmenu li a:visited { color: #fae7df; display: block; margin: 0px; padding: 9px 10px 10px 10px; } #catmenu li a:hover, #catmenu li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaBz74eLbG57gO8nPAOnecK4Ok2Bjq3t0A5CEP3URJbXyZ2o-Fa3uHpvy1Sni3tCR2UfxXSJ98ea4MmFQ2bb9cVa4DShRyHKtBz902JrGloYiUQf0pD7Azem85SKiWiKGLYfNYByouUqQ/) repeat-x; color: #b0c4de; margin: 0px; padding: 9px 10px 10px 10px; text-decoration: none; } #catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited { background:#ED4A05; width: 150px; color: #fae7df; font-family:Tahoma,century gothic,Georgia, sans-serif; font-weight: normal; float: none; margin: 0px; padding: 9px 10px 10px 10px; border-bottom: 1px solid #FF7800; } #catmenu li li a:hover, #catmenu li li a:active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKaBz74eLbG57gO8nPAOnecK4Ok2Bjq3t0A5CEP3URJbXyZ2o-Fa3uHpvy1Sni3tCR2UfxXSJ98ea4MmFQ2bb9cVa4DShRyHKtBz902JrGloYiUQf0pD7Azem85SKiWiKGLYfNYByouUqQ/) repeat-x; color: #fff; padding: 9px 10px 10px 10px; } #catmenu li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 170px; margin: 0px; padding: 0px; } #catmenu li li { } #catmenu li ul a { width: 140px; } #catmenu li ul a:hover, #catmenu li ul a:active { } #catmenu li ul ul { margin: -34px 0 0 170px; } #catmenu li:hover ul ul, #catmenu li:hover ul ul ul, #catmenu li.sfhover ul ul, #catmenu li.sfhover ul ul ul { left: -999em; } #catmenu li:hover ul, #catmenu li li:hover ul, #catmenu li li li:hover ul, #catmenu li.sfhover ul, #catmenu li li.sfhover ul, #catmenu li li li.sfhover ul { left: auto; } #catmenu li:hover, #catmenu li.sfhover { position: static; }

}  Langkah berikutnya ialah,
Carilah elmen yang seperti ini  
<div id='header-wrapper'> atau kode seperti ini <div id='wrapper'>
Dan letakanlah elmen atau kode ini di atasnya

<div id='catmenucontainer'>

<div id='catmenu'><ul>

<li><a href='Link Utama Blog sobat'>Home</a></li>

<li><a href='Link  sobat' title=' objek'>menu 1</a></li>

<li><a href='Link  sobat' title=' objek'>menu 2</a></li>

<li><a href='Link  sobat' title=' objek'>menu 3</a></li>

<li><a href='Link sobat'>menu 4</a></li>

<li><a href='Link  sobat' title=' objek'>menu 5</a></li>

<li><a href='Link  sobat' title=' objek'>menu 6</a></li>

<li><a href='Link  sobat' title=' objek'>menu 7</a></li>

</ul>

</div>

<div>

Sebelum menyimpannya anda harus Pratinjau terlebih dahulu,agar tau salah tidaknya elmen atau kode tersebut

Kemudan serelah itu Simpan.

Dan anda bisa mengeditnya dengan sesuai keinginan anda.

Selamat mencoba.