Menu Navigasi Terbaik ZIPUP

Lihat Gambar dibawah ini

DEMO

untuk membuatnya copy kode dibawah ini

<script type=text/javascript>
$(document).ready(function() {
    $(div.tovikh ul li a).hover(function() {
        $(em, this).stop(true, true).slideDown(500, "easeOutQuint");
        if ($(this).is(:animated)) {
            $(this).stop().animate({width:"250px"}, {duration:450, easing:"easeOutQuad"});
        } else {
            $(this).stop().animate({width:"250px"}, {duration:400, easing:"easeOutQuad"});
        }
    }, function() {
        $(em, this).stop(true, true).slideUp(100, "easeOutQuint");
        if ($(this).is(:animated)) {
            $(this).stop().animate({width:"30px"}, {duration:400, easing:"easeInOutQuad"})
        } else {
            $(this).stop(:animated).animate({width:"30px"}, {duration:450, easing:"easeInOutQuad"});
        }
    });
});
</script>

<style type="text/css">
.tovikh {
  width:670px;
  height:50px;
  font:italic 16px Times,serif;
  border:2px solid #e6e6e6;
  padding:0 0;
  margin:10px 5px 25px;
  color:#fff;
  text-decoration:none;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  overflow:hidden;
}

.tovikh ul {
  width:2500px;
  background-color:#622;
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

.tovikh li {
  text-align:left;
  list-style:none;
  margin:0 0;
  padding:0 0;
  display:inline;
  float:left;
}
.tovikh li a {
  width:30px;
  height:40px;
  line-height:normal;
  background-color:#333;
  border-left:2px solid #3c3c3c;
  padding:5px 7px;
  margin:0 0;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  text-shadow:1px 1px 2px #000;
  -webkit-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
  -moz-box-shadow:-2px 0 3px #000,-5px 0 20px #000;
  box-shadow:-2px 0 3px #000,-5px 0 20px #000;
  overflow:hidden;
  outline:none;
  display:block;
}

.tovikh li.akhir a {
  background-color:#622;
  min-width:250px;
  border-color:#633;
  overflow:hidden;
  text-align:left;
  display:block;
}

.tovikh li a:focus       {background-color:#888;border-color:#777;}
.tovikh li.akhir a:focus {background-color:#822;border-color:#633;}

.tovikh li a em {
  position:fixed !important;
  position:absolute;
  top:0px;
  right:0px;
  bottom:auto;
  left:0px;
  background-color:#aa9900;
  border-bottom:2px solid #aa8800;
  font-style:italic !important;
  line-height:normal;
  font:normal 30px Arial,sans-serif;
  color:#fff;
  padding:15px 10px 7px;
  margin:0 0;
  text-align:left;
  overflow:hidden;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}
</style>

<div class=tovikh>
     <ul>
          <li><a href=#>Mitra
                    <em>Deskripsi1</em>
               </a>
          </li>
          <li><a href=#>Profil
                    <em>Deskripsi2</em>
               </a>
          </li>
          <li><a href=#>Jurnal
                    <em>Deskripsi3</em>
               </a>
          </li>
          <li><a href=#>Komentar
                    <em>Deskripsi4</em>
               </a>
          </li>
          <li><a href=#>Sunting
                    <em>Deskripsi5</em>
               </a>
          </li>
          <li><a href=#>Arsip
                    <em>Deskripsi6</em>
               </a>
          </li>
          <li><a href=#>Feed
                    <em>Deskripsi7</em>
               </a></li>
          <li><a href=#>Kontak
                    <em>Deskripsi8</em>
               </a>
          </li>
          <li><a href=#>Pengunjung
                    <em>Deskripsi9</em>
               </a>
          </li>
          <li class="akhir"><a href=#>Beranda
                    <em>Deskripsi10</em>
               </a>
          </li>
     </ul>

</div>