Cara Membuat Menu Drop Down Di AtasJUDUL Header Atau Di Bawah JUDUL bannerfans_36599691

Jumat, 04 Mei 2012

Cara Membuat Menu Drop Down Di AtasJUDUL Header Atau Di Bawah JUDUL


KALI ini saya akan berbagi informasi gimana cara memasang menu link tepat di atas judul blog atau bisa juga di bawah postingan ..
agar tampilan blog lebih enak di pandang dan meringkat link sehingga pengunjung blog anda senang dan nyaman dalam melihat blog anda.

langsung aja yang anda perlukan adalah


contoh hasilnya:

code seperti di bawah ini :






/* -- Menu Horizontal + Sub Menu--*/
#cat-nav {background:#800000;margin:0 15px;padding:0;height:30px;}
#cat-nav a { color:#eee; text-decoration:none; text-shadow: #800000 0px 0px 0px;border-right:1px solid #800000;}
#cat-nav a:hover { color:#fff; }
#cat-nav li:hover { background:#000; }
#cat-nav a span { font-family:Verdana, Geneva, sans-serif; font-size:11px; font-style:normal; font-weight:100; color:#fff; text-shadow:none;}
#cat-nav .nav-description { display:block; }
#cat-nav a:hover span { color:#fff; }
#secnav, #secnav ul { position:relative; z-index:100; margin:0; padding:0; list-style:none; line-height:1; background:#800000; }
#secnav a { font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-weight:180; font-size:14px; display:block; z-index:100; padding:0 15px; line-height:35px; text-decoration:none;}
#secnav li { float:left; width: auto; height:35px;}
#secnav li ul  { position: absolute; left: -999em; width: 200px; top:35px}
#secnav li ul li  { height:30px; border-top:1px solid #fff; }
#secnav li ul li a  { font-family:Verdana, Geneva, sans-serif; width:180px; line-height:30px; padding:0 10px; font-size:11px; font-style:normal; font-weight:180; color:#eee; }
#secnav li ul ul  { margin: -30px 0 0 180px; }
#secnav li:hover ul ul, #secnav li:hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul { left:-999em; }
#secnav li:hover ul, #secnav li li:hover ul, #secnav li li li:hover ul, #secnav li.sfhover ul, #secnav li li.sfhover ul, #secnav li li li.sfhover ul { left: auto; }
#secnav li:hover,#secnav li.hover  { position:static; }
#cat-nav #secnav {width:65%;margin:0 auto;}
</style>
<div id='cat-nav'>
<ul class='fl' id='secnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>judul</a>
<ul id='sub-custom-nav'>
<li><a href='#l'> judul </a></li>
<li><a href='#'> judul  </a></li>
<li><a href='#'> judul </a></li>
</ul>
</li>
<li><a href='#'>  judul </a>
<ul id='sub-custom-nav'>
<li><a href='#'> judul </a></li>
<li><a href='#'> judul </a></li>
<li><a href='#'> judul  </a></li>
</ul>
</li>
<li><a href='#'> judul </a>
<ul id='sub-custom-nav'>
<li><a href='#'> judul </a></li>
<li><a href='#'> judul </a></li>
<li><a href='#'> judul </a></li>
<li><a href='#'> judul </a></li>
</ul>
</li>
<li><a href='#'> judul </a>
<ul id='sub-custom-nav'>

<li><a href='#/'> judul </a></li>
<li><a href='#'>  judul  </a></li>
<li><a href='#'>  judul  </a></li>
<li><a href='#'>  judul  </a></li>
<li><a href='#>  judul  </a></li>
<li><a href='#'>  judul  </a></li>
</ul>
</li></ul>

kemudian copy paste  tepat :

  • <header>  : untuk menempatkan menu di atas judul nama blog
  • </header> : untuk menempatkan menu di bawah judul nama blog
catatan:

untuk tanda # bisa diganti dengan link sobat 
untuk judul bisa di ganti sesuai keinginan sobat 
untuk background:#800000 bisa di ganti warna sesuai keinginan sobat

oke sekian dulu info dari saya moga bisa bermanfaat bagi anda semua




Baca Artikel lainya:

0 komentar:

Posting Komentar