将两个元素彼此对齐

Question

所以我希望列表位于Button 3下面，而不是嵌套列表而是Button 3

CSS可能会出现这种情况吗？

我尝试过Left + absolute和margin-left方法，但根据页面宽度的变化，它不是最好的方法。还有更好的方法吗？

附注：解决方案必须在IE9+

中运行

到目前为止我所得到的例子：

＆＃13;

＆＃13;

.container{
width: 700px;
height: 40px;
background: black;
}

a.button{
   display: inline-block;
   color: #ffffff;
   height: 100%;
   padding: 10px;
}

.hoverButton ~ .dropdown{
  display: none;
}
.hoverButton:hover ~ .dropdown{
  display: block;
  list-style: none;
  background: blue;
  width: 200px;
}
.hoverButton:hover ~ .dropdown .item{
  color: #ffffff;
}

＆＃13;

<div class="container">
<a class="button">Button 1</a>
<a class="button">Button 2</a>
<a class="button hoverButton">Button 3</a>
<ol class="dropdown">
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
</ol>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

CSS-Grid可以做到这一点

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  width: 700px;
  height: 40px;
  display: grid;
  grid-template-columns: auto auto auto;
  background: black;
}

a.button {
  display: inline-block;
  color: #ffffff;
  height: 100%;
  padding: 10px;
}

.dropdown {
  grid-row: 2;
  grid-column: 3;
}

.hoverButton~.dropdown {
  display: none;
}

.hoverButton:hover~.dropdown {
  display: block;
  list-style: none;
  background: blue;
}

.hoverButton:hover~.dropdown .item {
  color: #ffffff;
}

<div class="container">
  <a class="button">Button 1</a>
  <a class="button">Button 2</a>
  <a class="button hoverButton">Button 3</a>
  <ol class="dropdown">
    <li class="item">Item 1</li>
    <li class="item">Item 2</li>
  </ol>
</div>