CSS Drop-down Menu

Tutorial kali ini membuat Drop-down Menu dengan CSS

Step 1. HTML

source code pada html

index.html

<html>
<link href="main.css" rel="stylesheet" type="text/css" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop-Down Menu</title>
</head>
<body>
 <div class = "menu">Menu
 <a href = "#">Home</a>
 <a href = "#">News</a>
 <a href = "#">Articles</a>
 <a href = "#">Blog</a>
 <a href = "#">Contact</a>
 </div>
</body>
</html>

Step 2. CSS

css style untuk drop-down menu

main.css

@charset "utf-8";
/* CSS Document */
 body { font-family: arial, sans-serif }
 div.menu { font-weight: bold;
 color: white;
 border: 2px solid #225599;
 text-align: center;
 width: 10em;
 background-color: #225599 }
 div.menu:hover a { display: block }
 div.menu a { display: none;
 border-top: 2px solid #225599;
 background-color: white;
 width: 10em;
 text-decoration: none;
 color: black }
 div.menu a:hover { background-color: #dfeeff }

Ok, download contoh file ini dan selamat berkoding !

Leave a comment