CSS 및 HTML 수평 플라이 아웃 메뉴 - 오른쪽 위치 플라이 아웃

Question

CSS 및 HTML로 플라이 아웃 메뉴를 만들려고합니다. 본질적으로 나는 공중에 떠있을 때 그 아래에 목록을 드러내는 하나의 단추를 보여주고 싶다. 플라이 아웃 목록은 버튼의 오른쪽에 정렬해야합니다. 예 :

  //////////// 
      // BUTTON // 
      //////////// 
/////////////////////// 
// FLYOUT OPTION // 
/////////////////////// 

나는 몇 가지 예를 다음과 같은 jsFiddle을 생산 - http://jsfiddle.net/JT5gs/

그러나, 나는이 .filtersnav의 UL 규칙의 여백 값을 사용하여 분리 형태의 플라이 아웃 메뉴를 배치하는 방법을 알아낼 수 없습니다. 예 : 내가 플라이 아웃을 보여 주 버튼의 폭을 알고

.filtersnav ul { 
    margin:0px 0px 0px -165px; 

이 작동하지만, 나는 버튼이 변경 될 수 있습니다 내부의 텍스트로 길이 될 수 있도록 내 사이트에 현지화를 추가해야합니다.

내 질문을 명확히하기 위해 버튼의 너비가 결정되지 않은 경우 버튼 오른쪽에 플라이 아웃 메뉴를 배치 할 수 있습니까? JsFiddle는 메뉴가 올바르게 오른쪽으로 정렬 된 하나의 플라이 아웃 메뉴를 보여 주지만 두 번째 플라이 아웃 (더 긴 텍스트 값을 포함하는 버튼 포함)은 올바르게 정렬되지 않습니다.

Answer 1

은 li 태그에 position: relative을 넣어, 당신의 ul 태그에 여백을 대신 right: 0을 설정,

.filtersnav { 
 
    background:#eeeeee; 
 
    font-size:12px; 
 
    font-family:verdana,sans-serif; 
 
    font-weight:bold; 
 
    z-index:1000; 
 
    padding:0; 
 
} 
 
.filtersnav, .filtersnav ul { 
 
    float:right; 
 
    list-style:none; 
 
    margin:0px; 
 
    border: 1px solid #CCCCCC; 
 
    min-width: 75px; 
 
    padding:0; 
 
    background-color: #EEEEEE; 
 
    font-weight:bold; 
 
    z-index:1000; 
 
} 
 
.filtersnav span { 
 
    display:block; 
 
    color:#000000; 
 
    text-decoration:none; 
 
    padding:3px 10px; 
 
    cursor:pointer; 
 
} 
 
.filtersnav li { 
 
    position: relative; 
 
    float:left; 
 
    padding:0; 
 
    background:#eeeeee url('../images/Down.png') no-repeat 97% center; 
 
} 
 
.filtersnav ul { 
 
    position:absolute; 
 
    left:-999em; 
 
    height:auto; 
 
    width:280px; 
 
    font-weight:normal; 
 
    right: 0; 
 
    line-height:1; 
 
    border:0; 
 
    border-top:1px solid #CCCCCC; 
 
    padding:0; 
 
} 
 
.filtersnav li li { 
 
    width:280px; 
 
    border-bottom:1px solid #CCCCCC; 
 
    border-left:1px solid #CCCCCC; 
 
    border-right:1px solid #CCCCCC; 
 
    font-weight:bold; 
 
    font-family:verdana,sans-serif; 
 
    background:#eeeeee; 
 
} 
 
.filtersnav li li span { 
 
    padding:10px 10px; 
 
    width:260px; 
 
    font-size:12px; 
 
    color:#000000; 
 
} 
 
.filtersnav li ul ul { 
 
    margin:-33px 0 0 -281px; 
 
    padding:0px; 
 
    max-height:262px; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 

 
.filtersnav li li:hover{ 
 
    background:#145197; 
 
} 
 
.filtersnav li ul li:hover span, .filtersnav li ul li li:hover span, .filtersnav li ul li li li:hover span, .filtersnav li ul li li li:hover span { 
 
    color:#ffffff; 
 
} 
 
.filtersnav li:hover span, .filtersnav li.sfhover span { 
 
    color:#ffffff; 
 
} 
 
.filtersnav li:hover li span, .filtersnav li li:hover li span, .filtersnav li li li:hover li span, .filtersnav li li li li:hover li span { 
 
    color:#000000; 
 
} 
 
.filtersnav li:hover ul ul, .filtersnav li:hover ul ul ul, .filtersnav li:hover ul ul ul ul, .filtersnav li.sfhover ul ul, .filtersnav li.sfhover ul ul ul, .filtersnav li.sfhover ul ul ul ul { 
 
    left:-999em; 
 
} 
 
.filtersnav li:hover ul, .filtersnav li li:hover ul, .filtersnav li li li:hover ul, .filtersnav li li li li:hover ul, .filtersnav li.sfhover ul, .filtersnav li li.sfhover ul, .filtersnav li li li.sfhover ul, .filtersnav li li li li.sfhover ul { 
 
    left:auto; 
 
    background:#eeeeee; 
 
} 
 
.filtersnav li:hover, .filtersnav li.sfhover { 
 
    background:#145197 url('../images/DownSel.png') no-repeat 97% center; 
 
} 
 
.filtersnav li li:hover img { 
 
    filter:Invert; 
 
}  
 
.filtersnavSelected { 
 
    background-color:#FCBF44 
 
}

<ul class="filtersnav"> 
 
    <li> 
 
    <span>Another Flyout Menu &nbsp; &nbsp;</span> 
 
    <ul> 
 
     <li> 
 
     <span>Option</span> 
 
     <ul> 
 
      <li><span>Sub Option</span></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul> 
 

 
<ul class="filtersnav" style="margin-right:25px;"> 
 
    <li> 
 
    <span>Flyout Menu &nbsp; &nbsp;</span> 
 
    <ul> 
 
     <li> 
 
     <span>Option</span> 
 
     <ul> 
 
      <li><span>Sub Option</span></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>