CSS Horizontal submenu alignment

Question

I am writing a simple hover dropdown navigation bar in CSS and JQuery. The menu structure is like

Products  |  Research  |  Services  | Contact |

Services has two drop downs Courses and others. Research has 4 drop downs, say one, two, three and four. The problem is that, when I hover Research the drop downs comes as

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

And on Services

Products  |  Research  |  Services  | Contact |
Courses Others

So the sub menu is at left extreme and makes it difficult to click. Please tell me how to align it such a way that each submenu comes under its parent, like :

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

Products  |  Research  |  Services  | Contact |
                       Courses Others

Here is my code:

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>

CSS

nav {
    position: absolute;
    min-width:30%;
    float:right;
    right:12%;
    top: 15%;
}

nav ul li {
    display: inline-block;
    min-width: 20px;
    text-transform: uppercase;
}

nav ul li a{
    float: left;
    padding: 0px 10px 10px 10px;
}

nav ul li ul {
    display: inline-block;
    position: absolute;
    width: 100%;
    left:0;
    margin-top:7%;
}

nav ul li ul li {
    display: inline-block;
    min-width:10px;
}

and 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);
}); 

});

Please help.

Answer 1

I think your left: 0 in the class nav ul li ul is causing the problem. Check the following fiddle.

http://jsfiddle.net/gsdfpfe6/1/