Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog

M-S Blog || Membuat Menu Horizontal CSS3 Dengan Efect Hover pada Blog   - Sudah beberapa hari ini diliputi dilema pada background .. susah nentuin yang pas , biarpun pada akhirnya sedikit merasa lega juga dengan yang sekarang ,memang belum puas tapi ya sudahlah . O..ya pada sedikit kesempatan ini saya akan coba share sebuah menu simple CSS3 dengan hover efect yang lumayan bisa diandalkan untuk merubah penampilan template . Untuk lengkapnya silahkan cek demonya .

See Demo

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>

Kustomisasi 

• Tempatkan CSS3 diatas kode ]]></b:skin> atau </style> 
• HTML bisa ditempatkan dalam kerangka template atau pada Tata letak dan Add Gadget 

Catatan 

ul {
  list-style: none;
}

Tempatkan kode diatas sebelum kode CSS3  apabila pada hasil terdapat list .