Cara membuat menu lingkaran CSS3

sudah lama tidak posting tutorial dan kali ini senantiasa belajar share tutorial blogger sederhana yaitu membuat menu circle Navvigasi menu memang sangat berguna bagi navigasi blog anda nah disini contoh dari menu circlenya. Sebuah trik CSS yang menarik adalah penciptaan "lingkaran", dengan menggunakan border-radius properti CSS3 yang diatur ke nilai yang sangat besar: Ketika Anda melakukan ini, perbatasan pada masing-masing dari empat sudut elemen bergabung menjadi ujung putaran terus menerus, menciptakan tampilan lingkaran. Menggunakan trik kecil yang bagus, berikut ini menciptakan serangkaian link menu lingkaran:

Kunci seperti yang disebutkan adalah hanya untuk mengatur properti border-radius ke nilai yang sangat besar, setidaknya 50% dari kedua lebar dan tinggi elemen:

width:100px;height:100px;border-radius: 400px; /*really large border radius to create round borders*/-moz-border-radius: 400px;

-webkit-border-radius: 400px;

kode CSS secara keseluruhan

.circlemenu{width: 100%;overflow:hidden;}.circlemenu ul{margin: 0;padding: 0;font: bold 14px Verdana;list-style-type: none;text-align: center; /* "left", "center", or "right" align menu */}.circlemenu li{display: inline;margin: 0;}.circlemenu li a{display:inline-block;text-align:center;text-decoration: none;color: white;background:#b72d23;margin: 0;margin-right:5px; /*right spacing between each link */width:100px;height:100px;border-radius: 400px; /*really large border radius to create round borders*/-moz-border-radius: 400px;-webkit-border-radius: 400px;}.circlemenu a span{position:relative;top:40%;}.circlemenu li a:visited{color: white;}.circlemenu a:hover{background: #a71b15;}

untuk pengguna Blogger Kode CSS nya bisa anda tempatkan DI atas ]]></b:skin>

HTMLNYA

 <div class="circlemenu"><ul><li><a href="http://www.namabloganda.com"><span>Home</span></a></li><li><a href="http://www.namabloganda.com/new.htm"><span>DHTML</span></a></li><li><a href="http://www.namabloganda.com/"><span>CSS</span></a></li><li><a href="http://www.namabloganda.com/"><span>Forums</span></a></li><li><a href="http://www.namabloganda.com/"><span>JavaScript</span></a></li></ul></div>

nah anda bisa tempatkan kode HTML menurut kehendak andadan ganti URL nya


jika anda ingin menempatkan di HTML javascript anda copy seluruh kode berikut dan tambah ke widget anda

kode :

<style type="text/css">.circlemenu{width: 100%;overflow:hidden;}.circlemenu ul{margin: 0;padding: 0;font: bold 14px Verdana;list-style-type: none;text-align: center; /* "left", "center", or "right" align menu */}.circlemenu li{display: inline;margin: 0;}.circlemenu li a{display:inline-block;text-align:center;text-decoration: none;color: white;background:#b72d23;margin: 0;margin-right:5px; /*right spacing between each link */width:100px;height:100px;border-radius: 400px; /*really large border radius to create round borders*/-moz-border-radius: 400px;-webkit-border-radius: 400px;}.circlemenu a span{position:relative;top:40%;}.circlemenu li a:visited{color: white;}.circlemenu a:hover{background: #a71b15;}</style><div class="circlemenu"><ul><li><a href="http://hendrytha.blogspot.com/"><span>Home</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>DHTML</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>CSS</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>Forums</span></a></li><li><a href="http://hendrytha.blogspot.com/"><span>JavaScript</span></a></li></ul></div>

Interesting -webkit CSS Properties

Interesting -webkit CSS Properties


A few weeks back I touched on a handful of Mozilla-specific CSS properties that I found to be interesting. This week I'd like to share a few WebKit-specific CSS properties that make me all tingly inside.

-webkit-touch-callout
The -webkit-touch-callout property allows you to dictate what does or doesn't happen when a user taps and holds on a link on iOS. The default value is default and tap-holding on a link brings up the link bubble dialog; by using the value of none, that bubble never comes up.

copya.js-only {
  -webkit-touch-callout: none;
}
This would be very useful on apps that use A elements which aren't traditional links, but simply trigger AJAX / JavaScript functions.

-webkit-user-drag
The -webkit-user-drag property specifies that an entire element should be draggable instead of its contents:

copy/* no dragging at all */
.content p.noDrag {
  -webkit-user-drag: none;
}

/* drags entire element, not the text/selection */
.sidebar div.elDrag {
  -webkit-user-drag: element;
}
-webkit-appearance
Using the -webkit-appearance property, you can make a SPAN tag look like a radio button, or textarea, or SELECT dropdown, or any of the other 50 supported properties.

copyspan.lookLikeRadio {
  -webkit-appearance: radio;
}

span.lookLikeTextarea {
  -webkit-appearance: textarea;
}

span.lookLikeScrollbar {
  -webkit-appearance: scrollbartrack-horizontal;
}
Wanna see this one in action? Check out my post: WebKit-Specific Style: -webkit-appearance.

-webkit-text-security
Who knew you could customize the character which hides password characters?

copyinput[type="password"] {
  -webkit-text-security: square;
}
Not necessarily useful but interesting that WebKit gives us this ability.

-webkit-user-select
The -webkit-user-select property allows us to prevent users from selecting text within a given element:

copydiv {
  -webkit-user-select: none;
}
Preventing selection within a node can be helpful when on nodes which you prefer only be clicked.

I disliked browser-specific functionality when I was younger because I had the wrong mentality; you use them as enhancers, not for core functionality. Have a favorite WebKit-specific CSS property? Share it!

Horizontal Subnav with CSS & jQuery

Horizontal Subnav with CSS & jQuery

This is a simple navigation with a horizontal subnav.In most cases we can achieve this effect purely with CSS, but since we have to attend to our red headed step child aka IE6, we will use a few lines of jQuery to cover all grounds.

Wireframe – HTML

Nest a set of links wrapped within the <span> tag, this is how the sub navigation will be positioned.

<ul id="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link</a></li>
</ul>

Styling – CSS

Unlike a regular drop down menu where the subnav appears directly underneath the hovered/clicked list item, in this case all the subnav sets will start at the same location (left aligned – underneath the navigation).

ul#topnav {
 margin: 0; padding: 0;
 float: left;
 width: 970px;
 list-style: none;
 position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
 font-size: 1.2em;
 background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
 padding: 10px 15px;
 display: block;
 color: #f0f0f0;
 text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it */

Now set the absolute positioning on the <span> tag 35px from the top. I added some rounded corners on the bottom for style (this will not work in IE).

ul#topnav li span {
 float: left;
 padding: 15px 0;
 position: absolute;
 left: 0; top:35px;
 display: none; /*--Hide by default--*/
 width: 970px;
 background: #1376c9;
 color: #fff;
 /*--Bottom right rounded corner--*/
 -moz-border-radius-bottomright: 5px;
 -khtml-border-radius-bottomright: 5px;
 -webkit-border-bottom-right-radius: 5px;
 /*--Bottom left rounded corner--*/
 -moz-border-radius-bottomleft: 5px;
 -khtml-border-radius-bottomleft: 5px;
 -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span { display: block; } /*--Show subnav on hover--*/
ul#topnav li span a { display: inline; } /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover {text-decoration: underline;}

IE6 Fix – jQuery

Since IE6 does not understand li:hover (basically it only understands a hover event on a <a> tag), use jQuery to go around the issue.
For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

The following script contains comments explaining which jQuery actions are being performed.

<script type="text/javascript">
$(document).ready(function() {

 $("ul#topnav li").hover(function() { //Hover over event on list item
  $(this).css({ 'background' : '#1376c9 url(topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
  $(this).find("span").show(); //Show the subnav
 } , function() { //on hover out...
  $(this).css({ 'background' : 'none'}); //Ditch the background
  $(this).find("span").hide(); //Hide the subnav
 });

});
</script>

Nice and simple! Hope this will come in handy in your future projects.

css part2

Vertikal-Align and background css

1.Vertikal-Align 

lanjut untuk postingan selanjutnya yang membahas tentang text dan warna kali ini saya berbagi tentang pengenalan CSS pada element vertikal-alight.

vertikal align digunakan untuk menentukan posisi vertikal suatu element. berikut adalah contoh penggunaan vertikal  :

-meratakan dasar baris

contoh;

vertikal-align: baseline;

-meratakan bagian tengah element

contoh:

vertikal-align; middle

-menggunakan posisi subscript:

contoh:

vertikal-alight: subscript;

-membuat posisi superscript:

contoh:

 vertikal-alight: super;

-menggunakan Bagian atas elemen:

contoh:

vertikal-alight: text-top;

-meratakan bagian bawah elemen:

 contoh:
 vertikal-alight: text-bottom;

-meratakan bagian atas elemen menurut elemen tertinggi dalam baris:

contoh:

vertikal-alight: top;

- meratakan bagian bawah element menurut bagian elemen tertinggi pada baris:

contoh:

vertikal-align: bottom;

2. background css

       Attribut background digunakan untuk memberikan latar belekang dengan warna ataupun gambar. jika latar belakang berupa warna dapat menggunakan warna dengan yang dikehendaki brouswer ATAU menggunakan warna RGB seperti pada attribut collor

berikut ini adalah beberapa style background :

style	keterangan
background-color	warna background contoh:  background-color : transparant jika ingin menggukan tag warna dari id body misalkan #body{background : #aaaaaa; }
background-image	background diisi dengan Gambar contoh: background-image : none */tidak ada gambar*/ penempatan di dalam postingan contoh: #post {background-image : url (.../image.png) ; }
background-attachment	style tambahan untuk background berupa image dapat ikut di scrool atau tidak contoh: gambar latar dapat digulung background-attachment: scroll; gambar latar tetap: background-attachment: fixed;
background-position	menentukan posisi background (x,y), bisa diisi ukuran ataupun : , top,bottom, left,right,center, middle contoh: background-position : 35%; background-position : top right;

Tapi kita bisa menggunakan semua attribut background agar file CSS kita tidak besar:
seperti template template sekarang dengan format contoh di bawah ini:

disini saya akan bahas contoh untuk background body


#body {background: red url (http:..........header.png) repeat-x top;
            ....
             }


contoh di atas menampilkan gambar dan latar warna jelas ini seperti yang di gunakan pada background template saya yang menjadikan header warna biru image yang mengulang background gambar ke samping (repeat-x)"anda juga bisa mengubah mengulang kebawah (repeat-y) dan background warna sisanya.

atau bila menggunakan background yang besar bisa menggunakan fixed background: red url (http:..........header.png) fixed; */gambar tidak ikut scroll*/


selain body anda bisa menambahkan background pada template anda sesuai ke inginan anda
contoh pada header
/* Header */
#header-wrapper{background:url(http:..........header.png) no-repeat left; 
 width:1000px; 
 height:133px; 
 margin:0 auto; 
 padding:0}

contoh pada posting :

#post-body{background:url(http://joomlathemes.co/demo/templates/jt019_j15/images/main.png) repeat-y top left; 
  margin:0; 
  line-height:24px; 
  padding:15px 25px}

pada bagian heading sidebar

#sidebar h2{

  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglhagJAJuQQNH9YNKNKID1iVItTBDFWg4nRLloO2biVmjulY30U0Xd9U1BB7Dg2iPJqPpUdLD6LjpxNdrbrEzYpE53w8aUMCds6kBGsKvEsiIxiw5WfgIYs-dUAnnIRbmZtb3M1iYb7mB-/s1600/blueside2.png)repeat-x; 

  font-family:'Oswald',Arial,century gothic,verdana,sans-serif; 

  font-size:16px; 

  color:#fff; 

  font-weight:normal; 

  padding:10px 0 10px 20px; 

  margin:0; 

  border-bottom:2px solid #252525}

dan mungkin anda ingin menambahkan kebagian yang anda sukai selamat mencoba :-)

SAya Kira sampai disini Dulu yua .........

selanjutnya saya mau bahas tentang penggunaan CSS untuk ID dan Class 

serta beberapa penggunaan HOVER 

belajar CSS yu

para sobat sebenarnya saya ingin membahas tentang CSS dan sharing buat sobat Blogger.....kirain aja sobat tertarik tapi postingan ini akan dilakukan selama beberapa tahapan....Css penting buat para sobat agar sobat bisa tahu bagai mana agar css tidak ada pengulangan ataupun ada css yang tidak kepakai di blog sobat
Dan bila ada yang mau di Tanyaain boleh aja kirain saya bantu sekalian praktekin
pertama ga akan langsung praktek coba dengan pengenalan dulu

1.Pengenalan CSS
CSS atau Cascading style sheets adalah satu pasilitas untuk mempermudah pemeliharaan sebuah website... dengan adanya Css akan memudahkan merubah tampilan web atau bloger tanpa merubah dokumen HTMlnya
dan penulisannya sebagai berikut:
nama_style_atau_nama_tag-HTML{ nama_atribut : argumen;
                                                        .................................
                                                        ................................}
misal sederhana jika mendefinisikan gaya penulisan paragrap pada document HTML,maka dapat ditulis sebagai berikut:
p{
   font : arial 12pt italic;
  color : green;
  }

p=nama_style
font sama collor = nama attribut
sedangkan hasil yang ada paling kanan adalah agmumennya
maka paragraf pada dokumen Html akan menggunakan huruf berjenis arial dengan ukuran 12point bergaya italic dan berwarna hijau

sekarang kita  mencoba mengenal Attribut CSS


* font sie : menentukan ukuran hurup bisa dalam persen ataupun nilai dalam pixel
                           contoh: font-size :xx-small
                            font-size : x small
                            font-size : small
                            font-size : large
                            font size : 12px
                            font-size : 1,5 cm , font-size: 1,2in, font-size:200% dst
* font-family : menentukan jenis hurup ( arial; verdana, dsb)
                                   contoh: font-family: "courier new", verdana,arial
                                   jenis hurup tergantung dengan prioritas, dari contoh di atas maka yang pertama
                                  digunakan adalah "courier new" jika sistem mendukung jika tidak akan diteruskan
                                  dengan jenis huruf verdana dst.


* font-weight : menentukan penulisan huruf tipe standar adalah medium
                      contoh=  font-weight : bold;
                                     font-weight : light;     dst
*Font-style: ini adalah gaya huruf
 contoh: Font-style: normal , Font-style: italic, Font-style:  oblique;


* Text decoration : menentukan Gaya text  contoh: * Text decoration : underline
                                                                                    * Text decoration : none;
                                                                                    * Text decoration: overline; dsb


* Text Align : mengatur perataan Text contoh : * Text Align : left; (right,center,justify)
* Text indent: untuk text Yng lebih menjorok Pada awal paragraf : contoh  Text indent: 1,25 pt
*  Text Transform : huruf kecil atau huruf besar
contoh  Text Transform: capitalize atau uppercase

Margin

attribut margin di gunakan untuk mengatur jarak batas dengan batas terluar ( margin) dari halaman web contoh  : margin-left:15px   jadi jarak dari margin kiri 15px

              jika penggunaan satu persatu anda harus sebutkan seperti contoh di atas margin-right, bottom, Top

             Tapi jika ingin semuanya berarti nama attributnya Margin : contoh margin:15px berarti margin            keseluruhan  pada attribut tersebut 15px

collor 

ini menentukan warna contoh : collor : red , collor: #ffffff; collor RGB (115, 67,89)

contoh :.sidebar h2{ background : url(......./s1600/blueside2.png)repeat-x; 

                                font-family : 'Oswald',Arial,century gothic,verdana,sans-serif; 

                                font-size:16px; 

                                color:#ffffff; 

                                }

di atas adalah contoh dari bagian heding atau nama dari sidebar(judul) saya bahas 

    font-family : 'Oswald',Arial,century gothic,verdana,sans-serif; 

ini adalah : menentukan jenis hurup yang dipakai

                                font-size:16px; 

ini adalah : menentukan ukuran hurup yang dipakai

                                color:#ffffff; 

ini adalah : warna hurup yang dipakai

untuk background itu latar dari heading sidebar atau latar judul tersebut bisa warna atau gambar contoh:

 background :#000000 url(......./s1600/blueside2.png)repeat-x; 

#000000 = warna background yang akan di pakai

....../s1600/blueside2.png url gambar yang akan dipakai

repeat-x pengulangan gambar ke samping bisa juga repeat-y pengulangan gambar ke bawah atau repeat gambar terus di ulang

untuk background saya bahas entar yua soalnya ada banyak penggunaan background pada sebuah template

nice horizontal menu

DEMO

1. Log In to your blog's Edit HTML _

2. Check Expand Widget Templates and First Backup your template

3. Find CODE ]]></ b: skin>

Now enter the CSS code!

Under the code you put in this box Before Or Above code ]]></ 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 */

Stage Your Next Stay enter its Html Code

<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-->

Copy the code below </ head>

how to create a horizontal menu with drop tab menu

how to create a horizontal menu with CSS


Horizontal menu has a sub menu or child (children) that make up the menu tabs at the bottom of the horizontal one thing Good menu is only alone Without Using CSS Java script plug in. I use this menu in my theme web templates ....... The menu is very light loading time and not make your website slow Well If you are interested in Horizontal Menu ynag One is you follow the following steps:

1. Log In to your blog's Edit HTML _

2. Check Expand Widget Templates and First Backup your template

3. Find CODE ]]></ b: skin>



Now enter the CSS code!

Under the code you put in this box Before Or Above code ]]></ b: skin>

       #menu {
width: 960px;
height: 40px;
clear: both;
}

ul#nav {
float: left;
width: 960px;
margin: 0;
padding: 0;
list-style: none;
background: #dc0000 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;  
}

ul#nav li {
display: inline;
}

ul#nav li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 40px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #880000;
margin: 0;
padding: 0 30px;
background: #dc0000 url(../img/menu-parent.png) repeat-x;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;     
}

/* ACTIVE*/
ul#nav .current a, ul#nav li:hover > a  {
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #330000;
background: #bb0000;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px; 
}

/* DAFTAR Submenu tersembunyi secara default */
ul#nav  ul {
display: none;
}

/* KETIKA TINGKAT PERTAMA ITEM MENU melayang di, ATAS MENU ANAK MUNCUL */
ul#nav li:hover > ul {
position: absolute;
display: block;
width: 920px;
height: 45px;
position: absolute;
margin: 40px 0 0 0;
background: #aa0000 url(../img/menu-child.png) repeat-x;  
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px; 
}

ul#nav li:hover > ul li a {
float: left;
font: bold 1.1em arial,verdana,tahoma,sans-serif;
line-height: 45px;
color: #fff;
text-decoration: none;
text-shadow: 1px 1px 1px #110000;
margin: 0;
padding: 0 30px 0 0;
background: #aa0000 url(../img/menu-child.png) repeat-x; 
}

ul#nav li:hover > ul li a:hover {
color: #120000;
text-decoration: none;
text-shadow: none;
}

Note: If You Do not Want to Wear With radius change 0px 10px

-moz-border-radius-topright: 10px;

  -webkit-border-top-right-radius: 10px;

  -moz-border-radius-topleft: 10px;

  -webkit-border-top-left-radius: 10px;

Stage Your Next Stay enter its Html Code

<div id="menu">

<ul id="nav">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1 Submenu item 1</a></li>
<li><a href="#">Menu 1 Submenu item 2</a></li>
<li><a href="#">Menu 1 Submenu item 3</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 Submenu item 1</a></li>
<li><a href="#">Menu 2 Submenu item 2</a></li>
<li><a href="#">Menu 2 Submenu item 3</a></li>
</ul>
</li>

<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 Submenu item 1</a></li>
<li><a href="#">Menu 3 Submenu item 2</a></li>
<li><a href="#">Menu 3 Submenu item 3</a></li>
</ul>
</li> 
</ul>

</div>

Note:

<ul id="nav">

<li><a href="#">Menu 1</a>

 <ul>

 <li><a href="#">Menu 1 Submenu item 1</a></li>

 <li><a href="#">Menu 1 Submenu item 2</a></li>

 <li><a href="#">Menu 1 Submenu item 3</a></li>

 </ul>

</li>

"You See The # Replace with your URL and the" Menu 1 "Name Your Menu" Menu 1 Submenu item 1 "is for sub menu you



To Install the HTML code I believe you are already proficient and Depends On How Saved Through Where can add html / java script Or Direct Search Code <div id='content-wrapper'> put on it or Find code headers and Copy''Below'''