Disini saya membuat 2 buah file,
1. menu.css
2. index.html
Berikut untuk isi dari menu.css :
#nav{
font-family:urw;
font-size:13px;
margin-top:0px;
margin-bottom:10px;
padding:3px;
list-style-type:none;
list-style-position:outside;
position:relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: -moz-linear-gradient(top, #013E6A, #1C8FE2);
background: -webkit-gradient(linear, left top, left bottom, from(#013E6A), to(#1C8FE2));
height:40px;
}
#nav ul{
font-family:urw;
font-size:13px;
margin:2px;
margin-bottom:10px;
padding:3px;
list-style-type:none;
list-style-position:outside;
position:relative;
}
#nav a{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
display:block;
padding:8px;
color:#fff;
text-decoration:none;
background: -moz-linear-gradient(top, #013E6A, #1C8FE2);
background: -webkit-gradient(linear, left top, left bottom, from(#013E6A), to(#1C8FE2));
}
#nav a:hover{
color:#fff;text-shadow: 0px 3px 8px #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: -moz-linear-gradient(top,#0F3A61 , #0F69BB);
background: -webkit-gradient(linear, left top, left bottom, from(#0F3A61), to(#0F69BB));
}
#nav li{
padding:3px;
float:left;
position:relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: -moz-linear-gradient(top, #013E6A, #1C8FE2);
background: -webkit-gradient(linear, left top, left bottom, from(#013E6A), to(#1C8FE2));
}
#nav ul {
position:absolute;
display:none;
width:10em;
top:38px;
}
dan Berikut untuk sisi dari index.html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Menu</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.19.1" />
<link rel="stylesheet" type="text/css" href="menu.css" media="screen" />
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Layanan</a></li>
<li><a href="#">Kontak</a></li>
</ul>
</body>
</html>
Selesai..
Semoga Membantu.. Selamat berkreasi..
EmoticonEmoticon