使用jQuery设置菜单控件的动画

我有一个菜单控件，如下所示：

<li id="liReportMain" class="ReportMain" runat="server">
    <a href="" title="Reports">Reports</a>
</li>
<li id="liAEReport" class="SubReport" runat="server">
    <a href="../Reports/AEReport.aspx" title="Reports">AE Report</a>
</li>
<li id="liBUEngagementReport" class="SubReport" runat="server">
    <a href="../Reports/BUEngagementReport.aspx" title="Reports">BU Report</a>
</li>
<li id="liSCReport" class="SubReport" runat="server">
    <a href="../Reports/ScoreCardDiscussionsReport.aspx" title="Reports">ScoreCard Report</a>
</li>
<li id="liRandRReport" class="SubReport" runat="server">
    <a href="../Reports/RandRReport.aspx" title="Reports">R & R Report</a>
</li>

现在，当用户将鼠标悬停在

liReportMain

上时，下面的报告

子菜单应该会弹出到右侧。应使用
jQuery
实现此功能。请帮忙

$("#liReportMain").mouseover(
    function() {
      $('#liAReport').show();
      /* the same as above with all the elements you want to show*/
    });

如果您想在页面中为子菜单指定一个特定位置，请将子菜单元素放在div中，并使用css top和left属性进行定位。在上面的函数中，必须在div元素上使用show方法。
将此添加到CSS中，以默认隐藏子菜单：

.subReport {
  display: none;
 margin-left: 70px; // adjust this to make it float right properly

}

Jquery：

$("#liReportMain").hover(function() {
  $(".subReport").show();
}, function() {
   $(".subReport").hide();
});