我正在使用HTML和CSS处理一个据称简单的下拉菜单，并遇到了一个问题。淘网后谷歌和论坛无济于事，想是时候问了。我试图让下拉菜单与它的父元素对齐。
我已经尝试了几种不同的方法，到目前为止，最有希望的似乎是设置＆＃34;左：＆＃34;价值达到必要的百分比。
这引出了另一个问题： 问题：当我设置左侧值时，我最终在项目右侧有一堆空白区域，我似乎无法摆脱它。无法获得正确的宽度。
代码位于此处：https://jsfiddle.net/c6mz3t08/5/
HTML
bindings: {
"input[name='amount']:checked": "value:amount,events:['keyup']"
}
下拉列表的CSS
<div id="navbar-top">
<ul class="horizontal">
<li>Home</li>
<li>About
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</li>
<li>Header</li>
<li>Header</li>
<li>Header</li>
</ul>
似乎发生了对齐问题，因为.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
left:-38%; //end up with blank space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
width:100%;
}
在单词＆＃34; About＆＃34;之后开始。在第二个<ul>。
答案 0 :(得分：0)
a。）进行定位调整left中的.horizontal li ul参数（-39px似乎效果很好）。
b。）对于子菜单的宽度调整width中的.horizontal li ul li参数（70px在这里效果很好，但取决于内容）
答案 1 :(得分：0)
不要猜测left。它被推到右边的原因是因为ul默认有一些填充。
将填充设置为0，将左侧设置为0将解决此问题。
添加右侧空格是因为您将宽度设置为100％。如果移除宽度，它将适合其容器。但这可能不是你想要的，因为文本会换行，最好在它上面设置white-space:nowrap。
.horizontal li ul {
opacity:0;
visibility:hidden;
text-align:left;
position:absolute;
top:50px;
padding:0;
left:0; //using the LEFT parameter to get it in to alignment--end up with "blank" space on right?
}
.horizontal li ul li {
position:relative;
background-color:#BBB;
display:block;
white-space:nowrap;
}