Menu yang akan dibuat adalah menu untuk membuat sebuah web sederhana yang
mengkin menampilkan berbagai item agar web terliat cukup menarik.
Bentuk yang akan tampil pada browser anda adalah seperti ini.Dan
mungkin anda ingin membuat sebuah menu yang dapat roll down kebawah
saat anda meletakan kursor anda pada salah satu menu tersebut
<!doctype html>
<html lang=en>
<head>
<title>Menu HTML</title>
<meta charset=utf-8>
<meta details go here>
<link rel="stylesheet"
type="text/css" href="equal-2d.css">
<style>
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li { padding:
0; margin: 0;
}
body { font-size: 100%; font-weight: normal;
background-color:#99FF66; font: 100% arial;
}
header, footer, section, article, nav { display:block;
}
#wrapper {position:relative; top:0; left:0;width:950px;
margin:auto; text-align:center;
}
header {width:100%; height:80px; color:black;
background-color:#FFCC00; padding-top:10px;
}
h1 { font-size:200%; font-weight:bold; margin-top:20px;
}
#main-content {width:950px; margin:50px auto 0 auto;
background-color:white; color:black; text-align:center; font-weight:bold;
}
footer {margin:10px auto 0 auto; width:950px;
font-weight:bold; text-align:center;
background-color:#FFCC00; color:black; clear:both;
}
nav ul {position:absolute; top:100px; left:9%; width: 780px;
list-style: none; height: 36px;
}
nav li { float: left; width: 120px;
}
nav a { color: #000; font-size: 100%; font-weight:bold;
text-decoration: none; text-align:center; border: 1px solid #000; padding: 5px;
display: block;
background-color: white;
}
nav a:hover { font-weight: bold; background-color:green;
color:white;
}
.clear { clear:both;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>This is the header</h1>
</header>
<nav>
<ul>
</nav>
<br>
<div id="main-content">
<br>This content panel can contain several
columns<br/><br>
</div>
<footer>A footer goes here
</footer>
</div>
</body>
</html>
Thanks Bung...
BalasHapusmau belajar otodidak