CSS 수평 서브 메뉴 정렬

Question

CSS 및 JQuery에서 간단한 호버 드롭 다운 탐색 모음을 작성했습니다. 메뉴 구조는 다음과 같습니다.

Products | Research | Services | Contact | 

서비스에는 두 개의 드롭 다운 메뉴가 있습니다. 연구에는 1, 2, 3, 4 개의 드롭 다운이 있습니다. 문제는 내가 연구를 마우스를 가져 가면 드롭 다운이

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

: 여기

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

Products | Research | Services | Contact | 
         Courses Others 

은 내 코드입니다

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

도와주세요.

Answer 1

nav ul li ul 클래스의 left: 0이 문제의 원인이라고 생각합니다. 다음 바이올린을 확인하십시오.

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