수퍼 피시 메뉴 오른쪽 정렬 - 점프 중지

Question

상위 항목이 해당 하위 항목에 맞게 확장되어 on this site 주위로 점프하는 메뉴 항목을 정말로 중단하고 싶습니다.

나는, 내가이 CSS를 추가 할 때 내가 원하는 방법을 찾고 폭을 고정 된 것으로 메뉴 항목을 강제 얻을 수 있습니다 : 메뉴 화면이 동적 필요로

/*Menu item 1*/ 
#menu-item-117 .sub-menu {right: -125px;} 
/*Menu item 2*/ 
#menu-item-73 {width:45px;} 
#menu-item-73 .sub-menu {width:980px!important;right: -10px;} 
/*Menu item 3*/ 
#menu-item-122 {width:65px;} 
#menu-item-122 .sub-menu{width:980px!important;right: 165px;} 

그러나,이 명확하게 적합하지 않습니다. ..

CSS를 통해 원하는 것을 얻을 수있는 방법이 있습니까? 나는 그렇게 희망한다!

Wordpress의 경우 Theme Hybrid과 함께 제공되는 Superfish 메뉴를 사용하고 있습니다.

미리 도움을 주셔서 감사합니다.

Answer 1

나는 당신의 요지를 얻는다. 다시 보자.

이 빌드는 float: right/left; 대신 position: relative/absolute;을 사용하며 아래에 언급 된 하나의 결함이 있습니다.

그러나 Internet Explorer (Chrome & Firefox에서 테스트 됨)를 포함한 이전 브라우저에서이 기능을 테스트하지는 않았지만이 기능을 구현하는 데 도움이되기를 바랍니다. :)

#primary-menu .menu /* new rule */ { 
    position: relative; 
    height: 50px; /* The flaw is you have to fix the menu's height here */ 
} 

#primary-menu ul { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 

#primary-menu li { 
    float: left; 
    list-style: none outside none; 
    margin-left: 10px; 
    position: relative; 
} 

.sub-menu { 
    background: none repeat scroll 0 0 #244563; 
    clear: both; 
    display: none; 
    font-size: 0.8em; 
    overflow: visible; 
    padding: 5px 0 !important; 
    position: relative; 
    right: 0; 
    text-align: right; 
    top: 30px !important; 
    width: 700px !important; 
} 

.sub-menu li { 
    display: inline !important; 
    float: none !important; 
    padding: 10px 0 !important; 
    width: auto !important; 
}