내 CSS 메가 메뉴가 왼쪽이 아닌 오른쪽으로 드롭 다운 선택에서 확장됩니까?

Question

CSS 메가 메뉴를 만들었지 만 드롭 다운의 폭에 문제가 있습니다. 메뉴의 드롭 다운 부분은 부모가 시작하고 오른쪽으로 확장되지만 왼쪽으로는 확장되지 않습니다. 따라서 내 메뉴의 드롭 다운에있는 첫 번째 항목은 내 레이아웃의 너비를 확장합니다 (왼쪽부터 시작하기 때문에). 그러나 두 번째, 세 번째, 네 번째 항목의 드롭 다운 (중간/오른쪽에서 시작)은 해당 부모 및 권리. 설명하기가 어렵 기 때문에 사진을 찍었습니다.

이것은 내가보기에 원하는 것입니다.

하지만 오른쪽으로 멀리 이동할 때 다음과 같습니다 :

내가 두 번째 사진을 원하는가 가장 ​​왼쪽 드롭 다운이기 때문에에만이 방법을 찾습니다 왼쪽으로도 확장하십시오.

여기 내 CSS입니다. 필자는 식별자에 레이블을 붙일 수 없었기 때문에 모든 섹션에 주석을 달았습니다.

#navigation { 
    display: list-item; 
    text-decoration: none; 
    list-style-type: none; 
    padding-left: 0px; 
} 

/* PRODUCTS MEGA MENU */ 
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer { 
    display: none; 
    position: absolute; 
    height: auto; 
    min-height: 400px; 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
    z-index: 5000; 
    float: left; 
    padding-left: 5px; 
} 

/* PRODUCTS MEGA MENU LINKS */ 
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer a { 
    text-decoration: underline; 
    font-weight: bold; 
} 

/* EDUCATION MEGA MENU SECTION */ 
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl02_childNodesContainer { 
    display: none; 
    position: absolute; 
    height: auto; 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
    z-index: 5000; 
} 

/* SERVICE AND SUPPORT MEGA MENU SECTION */ 
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl03_childNodesContainer { 
    display: none; 
    position: absolute; 
    float: left; 
    height: auto; 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
    z-index: 5000; 
} 

/* ABOUT US MEGA MENU SECTION */ 
#Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl04_childNodesContainer { 
    display: none; 
    position: absolute; 
    float: left; 
    height: auto; 
    -webkit-column-count: 4; 
    -moz-column-count: 4; 
    column-count: 4; 
    z-index: 5000; 
} 

/* HOVER CODE FOR PRODUCTS SECTION */ 
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover >  #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl00_childNodesContainer { 
    display: block; 
    background-color: #fff; 
    float: left; 
} 

/* HOVER CODE FOR EDUCATION SECTION */ 
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl02_childNodesContainer { 
    display: block; 
    float: left; 
    background-color: #fff; 
} 

/* HOVER CODE FOR SERVICE AND SUPPORT SECTION */ 
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl03_childNodesContainer { 
    display: block; 
    float: left; 
    background-color: #fff 
} 

/* HOVER CODE FOR ABOUT US SECTION */ 
#navigation ul.sfNavHorizontalSiteMap.sfNavList li:hover > #Navigation_T5C241A8C018_ctl00_ctl00_ctl03_ctl04_childNodesContainer { 
    display: block; 
    float: left; 
    background-color: #fff 
} 

나는 필요한 모든 코드를 제공한다고 생각합니다 ... 나머지 CSS는 메가 메뉴 내의 링크와 관련이 있습니다.

Answer 1

시도의 왼쪽 :

#navigation>ul 
{ 
...rest of them...  
left:0; 
...rest of them... 
}