CSS Горизонтальное выравнивание подменю

Question

Я пишу простую панель навигации для выпадающего меню в CSS и JQuery. Структура меню похожа на

Products | Research | Services | Contact | 

Услуги имеют два спальных места Курсы и другие. Исследование имеет 4 понижения, скажем, один, два, три и четыре. Проблема заключается в том, что, когда я парить исследования раскрывающегося меню приходит как

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> 

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

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

}); 

Пожалуйста, помогите.

Answer 1

Я думаю, что ваш left: 0 в классе nav ul li ul вызывает проблемы. Проверьте следующий скрипт.

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