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>