Edit in JSFiddle

Result
JavaScript
HTML
CSS

$(document).ready(function () {
        $("#mainList > li").hover(function () {
            $(this).find("li").slideDown("fast");
        }, function () {
            $(this).find("li").slideUp("fast");
        });
    });

<html>
<head>
<title>Accordian List in Jquery
</title>
</head>
<body>
<ul id="mainList">
<li>Home</li>
<li>HTML
<ul id="innerList">
<li>Tags</li>
<li>Examples</li>
<li>Demos</li>
</ul>
</li>
<li>jQuery
<ul id="innerList">
<li>Methods</li>
<li>Selectors</li>
<li>Demos</li>
</ul>
</li>
<li>CSS</li>
<li>XML
<ul id="innerList">
<li>XSD</li>
<li>XSLT</li>
<li>DTD</li>
</ul>
</li>
</ul>
</body>
</html>

#mainList li
{
float:left;
List-style:none;
margin-left:30px;
font-family:comic sans ms;
width:80px;
}
#innerList li
{
float:none;
List-style:none
margin-left:-40px;
margin-top:20px;
display:none;
width:80px;
}