pertama copas kode berikut ini dan simpan dengan format (.html) untuk saran simpan dengan nama (index.html>
<html>
<head>
<title>Rahmawan EHS | Website</title>
<link href="css1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Internet</a>
<ul>
<li><a href="#">Website</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Tips & Trik</a></li>
</ul>
</li>
<li><a href="#">PHP</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Lain-lain</a>
<ul>
<li><a href="#">Daerah</a></li>
<li><a href="#">Alam</a></li>
<li><a href="#">Lain-lain</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
kedua copas scrip dibawah ini dengan format(.css) untuk saran simpan dengan nama (css1.css)
body{
background:white;
}
#menu{
background-image:url(../img/mn.png);
position:relative;
width:900px;
height:50px;
border:1px solid #000000;
}
#menu ul{
padding:0;
margin:0;
list-style:none;
}
#menu ul li{
float : left;
position:relative;
}
#menu ul li a{
float:left;
color:#FFF;
padding:15px;
border-right:1px solid #000000;
text-decoration:none;
display:block;
text-transform:uppercase;
}
#menu ul li a:hover{
background-image:url(../img/mnhover.png);
color:#FFF;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul{
display:block;
position:absolute;
top:50px;
left:-1;
}
#menu ul li:hover ul li a{
background-image:url(../img/mn.png);
display:block;
color:#000;
width:130px;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
text-transform:none;
}
#menu ul li:hover ul li a:hover{
background-image:url(../img/mnhover.png);
color:#FFF;
}
sipan semua yang telak anda buat di dalam 1 folder
jalankan yang berformat html
semoga berhasil
Post a Comment