我正在尝试使用 CSS 和 HTML 创建弹出菜单。本质上,我想显示一个按钮,悬停在它下面时会显示一个列表。弹出列表应与按钮右侧对齐。例如
////////////
// BUTTON //
////////////
///////////////////////
// FLYOUT OPTION //
///////////////////////
我遵循了几个示例并生成了以下 jsFiddle - http://jsfiddle.net/JT5gs/
但是,我无法找到使用 .filtersnav ul 规则的边距值将弹出菜单分开放置的方法。例如
.filtersnav ul {
margin:0px 0px 0px -165px;
当我知道显示弹出窗口的主按钮的宽度时,这会起作用,但我需要向我的站点添加本地化,以便按钮可以是任意长度,因为其中的文本可以更改。
为了澄清我的问题,当按钮的宽度未确定时,是否可以将弹出菜单放置在按钮的右侧? JsFiddle 显示一个弹出式菜单,其中菜单正确对齐到右侧,但第二个弹出式菜单(带有包含较长文本值的按钮)未正确对齐。
最佳答案
将 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 </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 </span>
<ul>
<li>
<span>Option</span>
<ul>
<li><span>Sub Option</span></li>
</ul>
</li>
</ul>
</li>
</ul>
关于html - CSS 和 HTML 水平弹出菜单 - 右侧定位的弹出菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11792714/