membuat menu link berubah warna

Kode css ini akan memformat blok menu link dengan background dan warna font yang berubah ketika kursor mouse berada di atasnya.

Contoh hasil:
Taruh kursor mouse anda di link-link di bawah ini.

Belajar Wordpress
Belajar Bisnis Online
Belajar HTML

Kode css yang digunakan:

.menusimple a {
display: block;
width: 100px;
height: 20px;
margin-top:-20px;
color: #000000;
background: #e9e9e9;
padding:6px;
text-decoration:none;
}

.menusimple a:hover {
display: block;
color: #ffffff;
background: #000000;

}

Penggunaan Kode:

<div class=”menusimple”>
tulis link anda di sini
</div>

Penjelasan:

• Link-link menu di letakkan di dalam div dengan nama class ‘menusimple’, hal ini memudahkan anda untuk menentukan format menu link berbeda-beda dalam satu halaman web.
• Ada 2 kode css yaitu untuk a dan a:hover, kode css untuk a:hover adalah kode yang akan digunakan ketika kursor mouse berada di atas link.
• Dengan menggunakan kode display:block , panjang dan lebar link dapat ditentukan, maka jika menggunakan warna background yang mencolok, akan terlihat seperti persegi empat.
• Kode width dan height adalah untuk menentukan panjang dan lebar kotak disekeliling link
• Kode margin-top:-20px; diperlukan agar tidak ada jarak antara link yang satu dengan link lainnya
• Color dan background adalah kode warna dari warna font dan latar belakang persegi empat
• Kode padding:6px; adalah untuk menentukan jarang tulisan dari kotak persegiempatnya
• Kode text-decoration:none; digunakan agar tidak ada garis bawah pada link