Membuat Navigasi Bertingkat dengan Efek Smooth JQuery

• HOME
• ARCHIVE
• DOWNLOAD
  • DOWNLOAD 1
  • DOWNLOAD 2
  • SUB-MENU
    • DOWNLOAD 3
    • DOWNLOAD 4
    • DOWNLOAD 5
• CONTACT
  • FACEBOOK
  • GOOGLE+
  • TWITTER
  • EMAIL
• REFFERENSI

CSS

.menu {
font:normal 12px Cambria,"Times New Roman",Times,serif;
line-height:normal;
text-transform:uppercase;
margin:5px 0px;
padding:0px 0px;
color:#fff;
text-decoration:none;
}

.menu ul {
height:34px;
line-height:34px;
background:#333;
margin:0px 0px 10px;
padding:0px 0px;
border:0px solid #e6e6e6;
}

.menu li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
color:#fff;
float:left;
display:inline;
position:relative;
}

.menu li a {
display:block;
background:#333;
border-left:1px solid #444;
border-right:1px solid #222;
margin:0px 0px;
padding:0px 15px;
color:#fff;
text-decoration:none;
font-weight:bold;
line-height:34px;
text-shadow:1px 1px 2px #000;
outline:none;
}

.menu li ul {
position:absolute;
z-index:10;
left:0px;
top:100%;
height:auto;
margin:0px 0px;
padding:0px 0px;
width:170px;
-webkit-box-shadow:0 1px 5px #000;
-moz-box-shadow:0 1px 5px #000;
box-shadow:0 1px 5px #000;
display:none;
}

.menu li ul a {
border-left:none;
border-right:none;
border-top:1px solid #444;
border-bottom:1px solid #222;
display:block;
}

.menu li ul li {
float:none;
display:block;
width:auto;
}

.menu li ul ul {
top:0px;
left:100%;
}

.menu li a:focus {
background-color:#666;
border-left-color:#777;
border-right-color:#555;
}

.menu ul li a:focus {
background-color:#666;
border-top-color:#777;
border-bottom-color:#555;
}

.menu li a:hover,
.menu ul li a:hover {color:#ccc;}

HTML

<div class='menu'>
<ul>
<li><a href='#'>HOME</a></li>
<li><a href='#'>ARCHIVE</a></li>

<li><a href='#'>DOWNLOAD</a>
<ul>
<li><a href='#'>DOWNLOAD 1</a></li>
<li><a href='#'>DOWNLOAD 2</a></li>
<li><a href='#'>SUB-MENU</a>
<ul>
<li><a href='#'>DOWNLOAD 3</a></li>
<li><a href='#'>DOWNLOAD 4</a></li>
<li><a href='#'>DOWNLOAD 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>CONTACT</a>
<ul>
<li><a href='#'>FACEBOOK</a></li>
<li><a href='#'>GOOGLE+</a></li>
<li><a href='#'>TWITTER</a></li>
<li><a href='#'>EMAIL</a></li>
</ul>
</li>
    </ul>
</div>

JQuery

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.menu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>