Edit in JSFiddle

$(document).ready(function () {    
    
    $('#samplenav li').hover(
        function () {
            //show its submenu
            $('ul', this).stop().slideDown(200);

        }, 
        function () {
            //hide its submenu
            $('ul', this).stop().slideUp(250);            
        }
    );
    
}); 

<ul id="samplenav" style="position:relative;top:50px;left:50px;">
    <li><a href="http://www.threelas.com/" target="_blank">Home</a></li>
    <li><a href="javascript:void(0);" target="_blank">Blogger Tutorials &gt; </a>
        <ul style="display: none; ">
            <li><a href="http://www.threelas.com/search/label/Blogger%20and%20Widget">Blogger</a></li>
            <li><a href="http://www.threelas.com/search/label/Blogger%20Api">Blogger API</a></li>
            <li><a href="http://www.threelas.com/search/label/Blogger%20SEO">Blogger SEO</a></li>
        </ul>
        <div class="clear"></div>
    </li>
</ul>
<div class="clear"></div>

#samplenav {
list-style:none outside none;
margin:0;
padding:0
}

#samplenav li {
background:none repeat scroll 0 0 #7F7F86;
border:3px outset #7B7B7B;
border-radius:20px 20px 20px 20px;
display:block;
float:left;
position:relative;
width:auto;
z-index:500;
margin:0 1px
}

#samplenav li a {
display:block;
font-weight:700;
height:25px;
text-decoration:none;
text-align:center;
color:#333;
padding:8px 5px 0
}

#samplenav li a:hover {
color:#fff
}

#samplenav a.selected {
color:red
}

#samplenav ul {
list-style:none outside none;
position:absolute;
display:none;
left:0;
margin:4px 0 0 -1px;
padding:0
}

#samplenav ul li {
width:auto;
float:left;
margin:1px 0 0
}

#samplenav ul a {
display:block;
height:15px;
color:#FFF;
padding:8px 5px
}

#samplenav ul a:hover {
text-decoration:none
}

#samplenav li:hover {
background:#A52A2A
}