Cara Membuat Menu Horizontal menggunakan CSS
Disini menjelaskan tata cara membuat menu :
- Buat struktur HTML terlebih dahulu
<!DOCTYPE>2. Setelah membuat struktur HTML nya kemudian membuat Style supaya tampilan menu menjadi lebih bagus jika dilihat. adapun sourcenya seperti dibawah ini :
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Saung Abdi</title>
</head>
<body>
<div id="box_dasar">
<div id="menu_atas">
<ul id="float">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul></div>
</body>
</html>
#box_dasar #menu_atas{Adapun hasil dari source diatas seperti pada gambar dibawah ini :
background:#89c34c;
background:-webkit-linier-gradient(top,#89c34c,#55a205);
background:-moz-linier-gradient(top,#89c34c,#55a205);
background:-ms-linier-gradient(top,#89c34c,#55a205);
background:-o-linier-gradient(top,#89c34c,#55a205);
background:linier-gradient(top,#89c34c,#55a205);
padding:3px;
margin-top:0px;
margin-bottom:10px;
height:39px;
width: 330px;
background-color:#74c124;
font-size:14px;
font-style:bold;
color:#ffffff;
border:0px solid #000000;
-moz-border-radius:7px 7px 7px 7px;
-moz-box-shadow:#54a702 0px 0px 1px;
-webkit-border-radius: 7px 7px 7px 7px;
-webkit-box-shadow:#54a702 0px 0px 1px;
box-shadow:#54a702 0px 0px 2px;
border-radius: 7px 7px 7px 7px;
}
#float li {
float: left;
list-style: none;
padding-bottom: 10px;
padding-top: 0px;
}
#float li a {
border-left: 1px solid rgba(0, 0, 0, 0.2);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: white;
font-variant: small-caps;
text-decoration: none;
padding: 5px 10px;
}
#float li a:hover {
background: green;
color: #d0d2d5;
}
