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

把position: relative您li標籤，並在您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>