Copy di atas /b:skin
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 195px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
Copy di bawah </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>
Copy di atas <header>
<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://ngoprekteknologi.blogspot.com'>Home</a></li>
<li><a href='https://plus.google.com/100161913906992683917/posts' target='new'>Profile</a></li>
<li><a href='#'>Kompetensi Kejuruan</a>
<ul>
<li><a href='#'>Membuat Desain Sistem Keamanan Jaringan</a>
<ul>
<li><a href='#'>Menentukan Jenis Jenis Keamanan Jaringan</a></li>
<li><a href='#'>Memasang Firewall</a></li>
<li><a href='#'>Mengideintifikasi pengendalian jaringan yang diperlukan</a></li>
<li><a href='#'>Mendesain sistem keamanan jaringan</a></li>
</ul>
</li>
<li><a href='#'>Melakukan perbaikan dan seting ulang koneksi jaringan berbasis luas</a>
<ul>
<li><a href='#'>Menjelaskan langkah persiapan untuk seting ulang koneksi jaringan</a></li>
<li><a href='#'>Melakukan perbaikan koneksi jaringan</a></li>
<li><a href='#'>Melakukan seting ulang koneksi jaringan</a></li>
<li><a href='#'>Memeriksa hasil perbaikan koneksi jaringan</a></li>
</ul>
</li>
<li><a href='#'>Mengadministrasi server dalam jaringan</a>
<ul>
<li><a href='#'>Memilih aplikasi untuk server</a></li>
<li><a href='#'>Memilih sistem operasi untuk jaingan</a></li>
<li><a href='#'>Memilih komponen server</a></li>
<li><a href='#'>Menetapkan spesivikasi server</a></li>
<li><a href='#'>Membangun dan mengkonfigurasi server</a></li>
<li><a href='#'>Menguji server</a></li>
<li><a href='#'>Memonitor kinerj jaringan</a></li>
</ul>
</li>
<li><a href='#'>Merancang bangun dan menganalisa wide area network</a>
<ul>
<li><a href='#'>Mengkonfirmasi kebutuhan klien dan perangkat jaringan</a></li>
<li><a href='#'>Meninjau masalah keamanan</a></li>
<li><a href='#'>Memasang dan mengkonfigurasi produk dan perangkat geteway</a></li>
<li><a href='#'>Mengkonfigurasi dan Menguji titik jaringan</a></li>
<li><a href='#'>Mengimplementasi Perubahan</a></li>
</ul>
</li>
<li><a href='#'>Merancang Web Data Base Untuk Content Server</a>
<ul>
<li><a href='#'>Menentukan Kebutuhan Sistem</a></li>
<li><a href='#'>Menentukan Prosedur Recovery</a></li>
<li><a href='#'>Merancang Arsitektur Basis Data</a></li>
<li><a href='#'>Mengklasifikasikan Penggunaan Basis Data</a></li>
</ul>
</li>
<li><a href='#'>Tugas Praktek</a>
<ul>
<li><a href='#'>Installasi VirtualBox</a></li>
<li><a href='#'>Installasi Linux Pada VirtualBox</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Muatan Lokal</a>
<ul>
<li><a href='#'>Membuat Profile</a></li>
<li><a href='#'>Membuat Calender</a></li>
</ul>
</li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Photoshop</a>
<ul>
<li><a href='#'>Edit Warna</a></li>
<li><a href='#'>Effect Collor</a></li>
</ul>
</li>
<li><a href='#'>CorelDraw</a>
<ul>
<li><a href='#'>Edit Warna</a></li>
<li><a href='#'>Effect Collor</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Blog Friend Class</a>
<ul>
<li><a href='#'>Nama Lengkap</a></li>
<li><a href='#'>Nama Lengkap</a></li>
</ul>
</li>
<li><a href='#'>Contact Us</a>
<ul>
<li><a href='#'>My Twitter</a></li>
<li><a href='#'>My Facebook</a></li>
</ul>
</li>
</ul>
<br style='clear: left'/>
</div>
Hasilnya :
Tidak ada komentar:
Posting Komentar