cara buat Menu Horizontal Bagus

senantiasa belajar cara membuat menu horizontal

mungkin postingan ini telah lama terkubur dan mungkin belum di jelasin secara keseluruhan tentang toutorial ini   

khususnya buat kode htmlnya dan salah satunya berkomentar disini kali ini saya bahas lengkap dengan penempatan buat kode htmlnya

Menu Horizontal Transparan Untuk Blog ini cukup bagus untuk mempercantik blog anda jika Anda Tertarik Silahkan Anda Ikuti Langkah di bawah untuk Cara membuat menu horizontal transparant Tersebut

DEMO BISA DILIHAT DISINI

1. Login ke blog anda
2. cari Code ]]></b:skin>
3. COPY CSS CODE di bawah ini tepat di Atas ]]></b:skin>

/* == 10. Horizontal menu Background == */

/*====================
 Color Scheme Begin
=====================================================================
====================================================================*/

/* Menu bar background color */
#navigation, 
#nav li ul li, 
#nav li ul li a{
background: #000; 
}

/* Menu Item text color */
#nav li a, 
#nav li a:hover, 
#nav li ul li,
#nav li ul li a,
#nav li ul li a:hover  {
color: #fff; 
}

/* Menu Item background color on hover */
#nav li a:hover, 
#nav li ul li a:hover  {
background: #9ACD32; 
}

/* Text Shadow */
#nav li a, 
#nav li a:hover, 
#nav li ul li a:hover  {
text-shadow: 0 1px 1px #333; 
}

/* Search form colors */
.searchform input, .searchform input:not(:focus){
color:#B1B1B1; /*search form text color default*/
background: #fff; /*search form background color default*/
}
.searchfield:focus{
color: #000; /* search form text color after click */
}

/*=====================================================================
=======================================================================
 Color Scheme End
====================*/

#menu_div{
clear: both;
position: relative;
top: 0;
left: 0;
} /* Free space to top specialy for menu */

#navigation {
position: fixed;
}

#navigation, #menu_div {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}

#menu_div, #navigation, #menu, #nav{
height: 45px; /* menu height */
}

#menu_div:hover,
#navigation:hover,
#nav li a:hover, #nav li ul a 
{
opacity: 0.95;/* Menu transparency on mouse hover*/
} 

#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover)
{
opacity: 0.8;/* Menu transparency on mouse out */
}


#menu {
width: 960px;
margin:0 auto; /*center the menu*/
padding:0;
position: relative;
}

#nav{
width: 960px;
margin:0;
padding:0;
position: relative;
font-family: 'Arial', Helvetica, sans-serif;
}

#nav li a,#nav li {
float:left;
}

#nav li {
list-style:none;
position:relative;
}

#nav li a {
line-height: 45px;
padding:0 15px;
text-decoration:none;
margin:0;
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

/*====================
 Submenu 
=====================*/
#nav li ul {
display:none;
position:absolute;
left:0;
top:100%;
padding:0;
margin:0;
} /* hide submenu */

#nav li:hover > ul {
display:block;
} /* show submenu on hover */

#nav li ul li,#nav li ul li a {
float:none;
height: 35px; /* submenu item height */
min-width: 150px; /* submenu item minimal width */
line-height: 35px;
border-right: 0;
text-shadow: none;
display:block;
font-size:13px;
font-weight:400;
text-transform:inherit;
} /* Submenu item */

#nav li ul li {
_display:inline; /* for IE */
}

/* == 12. Sub-Sub Menu == */
#nav li ul li ul {
display:none;
}

#nav li ul li:hover ul {
left:100%;
top:0;
}

/*====================
 Search form 
====================*/

.searchform {
position: absolute;
right: 15px;
top: 6px;
display: inline-block;
zoom: 1;
*display: inline;
border: 0;
padding: 0;
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
height: 27px;
line-height: 27px;
padding-left: 10px;
padding-right: 10px;
width: 150px;
border: 2px solid #333;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 1px 1px 2px #A1A1A1;
-webkit-box-shadow: inset 1px 1px 2px #A1A1A1;
box-shadow: inner 1px 1px 2px #A1A1A1;
}

.searchfield:focus{
font-weight: 700;
width: 220px;
}

.searchfield:not(:focus){
width: 150px;
}


/*========================
  Transitions
========================*/

#nav li a:hover,
#nav li ul li a:hover  {
-webkit-transition-property:color, background; 
-webkit-transition-duration: 0.5s, 0.5s; 
-webkit-transition-timing-function: linear, ease-out;
}

.searchfield:focus,
.searchfield:not(:focus){
-webkit-transition-property:width; 
-webkit-transition-duration: 0.5s, 0.5s; 
-webkit-transition-timing-function: linear, ease-out;
}

#menu_div:hover,
#navigation:hover,
#nav li ul a, 
#menu_div,
#navigation, 
#nav li a, 
#menu_div:not(:hover), 
#navigation:not(:hover)
{
-webkit-transition-property:opacity; 
-webkit-transition-duration: 0.5s, 0.5s; /* duration in seconds */
-webkit-transition-timing-function: linear, ease-out;
} /* Menu transparency animation */

Lalu Untuk Code HTML Anda Copy Code di Bawah ini tepat di bawah </head> 

<div id="menu_div">
<div id="navigation">
 <div id="menu">
  <ul id="nav">
   <li><a href="#">Home</a>
    <ul>
     <li><a href="#">Lorem ipsum</a></li>
     <li><a href="#">Aenean massa</a></li>
     <li><a href="#">Nullam dictum felis</a></li>
     <li><a href="#">Aenean leo ligula</a></li>
     <li><a href="#">Curabitur ullamcorper</a></li>
     <li><a href="#">Item - Level 2</a>
      <ul>
       <li><a href="#">Sub item 1</a></li>
       <li><a href="#">Sub item 2</a></li>
       <li><a href="#">Item - Level 3</a>
        <ul>
         <li><a href="#">Sub sub item 1</a></li>
         <li><a href="#">Sub sub item 2</a></li>
         <li><a href="#">Item - Level 4</a>
          <ul>
           <li><a href="#">Sub sub sub item 1</a></li>
           <li><a href="#">Sub sub sub item 2</a></li>
           <li><a href="#">Sub sub sub item 3</a></li>
          </ul>
         </li> <!-- Level 4 END -->
        </ul>
       </li> <!-- Level 3 END -->
      </ul>
     </li> <!-- Level 2 END -->
    </ul>
   </li> <!-- Level 1 END -->
   <!-- END Home Item -->

   <li><a href="#">Portfolio</a>
    <ul>
     <li><a href="#">Maecenas tempus</a></li>
     <li><a href="#">Vestibulum ante ipsum</a></li>
     <li><a href="#">Praesent adipiscing</a></li>
     <li><a href="#">Curabitur ligula</a></li>
     <li><a href="#">Vestibulum</a>>
     </li>
    </ul>
   </li>
   <!-- END Portfolio Item -->

   <li><a href="#">Blog</a>
    <ul>
     <li><a href="#">Fusce id purus</a></li>
     <li><a href="#">Aenean viverra</a></li>
     <li><a href="#">Phasellus magna</a></li>
     <li><a href="#">Morbi ac felis</a></li>
    </ul>
   </li>
   <!-- END Blog Item -->

   <li><a href="#">Services</a></li>
   <li><a href="#">About Us</a></li>
   <li><a href="#">Contact Us</a></li>
  </ul><!-- #nav END-->

  <!-- Search Form -->
  <form class="searchform" action="#">
   <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
  </form>
  <!-- / Search Form -->

 </div><!-- #menu END-->
</div><!-- #navigation END-->
</div><!-- #menu_div END-->

DIHARAPKAN PRATINJAU DULU SEBELUM disimpan



Perhatian:
jika anda sudah pernah memakai menu lain dan diharapkan namanya ganti jangan sampai namanya sama
tapi tidak semua sama biasanya langsung jadi :

contoh :
bila dalam kode css: #navigation,
dan kode HTMLnya: <div id="navigation">
dari bagian di atas bila ada menggunakan anda memakai menu horizontal lain dan namanya sama dengan kode css dan Html dari toutorial ini anda harus ganti dengan menambahkan 1 contoh:

bila dalam kode css: #navigation1,
dan kode HTMLnya: <div id="navigation1">
atau hapus aja yang lama :
silahkan berkomentar bila masih bingung

Jika Kurang Mengerti Untuk Memasangnya Silahkan Berkomentar !!!!!!!