↡↡=========================== SCREENSHOT ==========================↡↡
↟↟=========================== SCREENSHOT ==========================↟↟
↡↡=============================== HTML ================================↡↡
<!DOCTYPE html>
<html>
<head>
<title>Menu css</title>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<center>
<div class="sub-menu">
<ul>
<center>
<li><a class="home" href="index.html">HOME</a></li>
<li><a class="menu" href="aplikasi.html">APLIKASI</a></li>
<li><a class="menu" href="game.html">GAME</a></li>
<li><a class="menu" href="profil.html">PROFIL</a></li>
</center>
</ul>
</div>
</center>
</body>
</html>
↟↟=============================== HTML ================================↟↟
↡↡=============================== CSS =================================↡↡
{ margin:0; padding: 0;}
.sub-menu {
background-color: #3DB9C5;
width: 1000px;
height: 50px;
border-radius: 10px 10px 0px 0px ;
transition: all 1.0s ease;
}
.sub-menu:hover {
border-radius: 0px 0px 60px 60px;
box-shadow: 0px 6px 10px;
}
.sub-menu ul li {
list-style: none;
}
.sub-menu ul li{
margin-left: 280px;
}
.sub-menu ul li a {
margin-top: 15px;
width: 100px;
position: relative;
text-decoration: none;
float: left;
color: #060606;
}
.home {
transition: all 1.0s ease;
height: 0px;
width: 0px;
}
.home:hover {
color: #1C1C94;
background-color: #A2D9E0;
height: 50px;
border-radius: 0px 0px 25px 25px;
padding-top: 20px;
transform: translate(-9px);
box-shadow: 0px 2px 4px;
}
.menu {
transition: all 1.0s ease;
height: 0px;
border-radius: 0px;
}
.menu:hover{
box-shadow: #797878 2px 2px 4px;
color: white;
background-color: #90B9E1;
height: 50px;
border-radius: 0px 0px 25px 25px;
padding-top: 20px;
transform: translate(-9px);
}
↟↟=============================== CSS =================================↟↟
No comments:
Post a Comment