Menu CSS3 Dengan Efect Hover
Komposisi
CSS3/.....---CSS3 BREWOK---.....\
nav {
font:700 16px/60px 'Lato', sans-serif;
width:90%;
margin:30px auto 0 auto;
background:#374D61;
overflow:hidden;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
}
nav ul {
height:60px;
overflow:hidden;
}
nav ul li {
width:25%;
float:left;
text-align:center;
}
.item-container {
position:relative;
height:120px;
cursor:pointer;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.item-container:hover{
top:-60px;
}
.item-top,
.item-bottom {
height:60px;
position:relative;
}
.item-top {
color:#ffffff;
}
.item-bottom {
background:#4D6377;
color:#ffffff;
}
HTML
<nav>
<ul>
<li>
<div class="item-container">
<div class="item-top">Home</div>
<div class="item-bottom">Home</div>
</div>
</li>
<li>
<div class="item-container">
<div class="item-top">Work</div>
<div class="item-bottom">Work</div>
</div>
</li>
<li>
<div class="item-container">
<div class="item-top">About</div>
<div class="item-bottom">About</div>
</div>
</li>
<li>
<div class="item-container">
<div class="item-top">Contact</div>
<div class="item-bottom">Contact</div>
</div>
</li>
</ul>
</nav>