Pertama membuat dasar dari menu drop down, ketik script di bawah ini lalu simpan dengan nama “menu.html”
<html>
<head>
<title>faruzone</title>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#">Recipes</a>
<ul>
<li><a href="#">Starters</a></li>
<li><a href="#">Main Courses</a></li>
<li><a href="#">Desserts</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Buy Online</a></li>
</ul>
</div></body>
</html>
hasilnya :
Kedua tambahkan script css di bawah ini tepat di bawah kode <head> lalu simpan
<style>
.navigation{
width:200px;
font-family:Arial, Helvetica, sans-serif;
}
.navigation ul{
display:none;
list-style:none;
}
.navigation li{
display:block;
list-style:none;
list-style-position:inside;
}
.navigation li a{
display:block;
padding: 5px 5px 5px 0, 5em;
border-left:12px solid #711515;
border-right: 1px solid #711515;
border-top: 1px solid #711515;
border-bottom: 1px solid #711515;
background-color:#b51032;
color:#ffffff;
text-decoration:none;
}
.navigation ul a{
display:block;
padding: 5px 5px 5px 0, 5em;
border-left:12px solid #711515;
border-right: 1px solid #711515;
background-color:#FF6699;
color:#ffffff;
text-decoration:none;
}
.navigation li a:hover, .navigation ul a:hover{
background-color:#711515;
color:#ffffff;
text-decoration:none;
}
.navigation li:hover ul{
display:block;
}
</style>
hasilnya:
Ketika salah satu menu di sorot
0 komentar:
Posting Komentar