Javascript CSS水平子菜单对齐

我正在用CSS和JQuery编写一个简单的悬停下拉导航栏。菜单结构如下

Products  |  Research  |  Services  | Contact |

服务有两个下拉列表课程和其他。研究有四个下拉列表，比如一、二、三和四。问题是，当我将鼠标悬停在Research上时，下拉列表如下所示：

Products  |  Research  |  Services  | Contact |
One Two three Four

以及在服务方面

Products  |  Research  |  Services  | Contact |
Courses Others

因此，子菜单位于左端，很难单击。请告诉我如何将其对齐，使每个子菜单位于其父菜单下，如：

Products  |  Research  |  Services  | Contact |
         One Two three Four

Products  |  Research  |  Services  | Contact |
                       Courses Others

这是我的密码：

navbar.php

<ul id="headnav">
    <li class="active"> <a href="#"> ABOUT </a> </li>
    <li> <a href="#"> Products </a> </li>
    <li> <a href="#"> Research </a> 
        <ul>
            <li> <a href="#"> one </a> </li>
            <li> <a href="#"> two </a> </li>
            <li> <a href="#"> three </a> </li>
            <li> <a href="#"> Four </a> </li>
        </ul>
    </li>
    <li> <a href="#"> Services </a> 
        <ul>
            <li> <a href="#> Courses </a> </li>
            <li> <a href="#"> Others </a> </li>
        </ul>
    </li>
    <li> <a href="#"> Contact </a> </li>
</ul>

和Jquery

$(document).ready(function() { 
 $('nav > ul > li > ul').hide();
 $('nav > ul > li').hover(function() {
    var index = $("nav > ul > li").index(this);
   $(this).find('ul').fadeIn(400);
},function() {
  $(this).find('ul').fadeOut(400);
}); 

});

请帮忙。

我想是你在nav ul li ul类中的左：0导致了这个问题。 检查下面的小提琴

---

谢谢你的回复。但下拉列表仍有一个与其父项的偏移量。此外，如果left为0，则服务的子菜单不再是水平的。

$(document).ready(function() { 
 $('nav > ul > li > ul').hide();
 $('nav > ul > li').hover(function() {
    var index = $("nav > ul > li").index(this);
   $(this).find('ul').fadeIn(400);
},function() {
  $(this).find('ul').fadeOut(400);
}); 

});