$(document).ready(function () {
$("#main li").hover(function () {
$(this).find("ul").slideDown("slow");
}, function () {
$(this).find("ul").slideUp("slow");
});
});
<html>
<head>
<title>Slide Effect</title>
</head>
<body>
<ul id="main">
<li>Football
<ul class="innerList">
<li>Fabregas</li>
<li>Henry</li>
<li>Messi</li>
</ul>
</li>
<li>Cricket
<ul class="innerList">
<li>Sachin</li>
<li>Ponting</li>
<li>Sehwag</li>
</ul>
</li>
<li>Tennis
<ul class="innerList">
<li>Federer</li>
<li>Djokovic</li>
<li>Nadal</li>
</ul>
</li>
</ul>
</body>
</html>
#main li
{
float: left;
padding-left: 20px;
list-style: none;
}
.innerList
{
display:none;
}
.innerList li
{
float:none!important;
margin-left:-20px!important;
}