html - 显示 2 个并排的下拉列表

Question

我有两个彼此相邻的下拉菜单，但是当单击第一个下拉菜单时，它会将第二个下拉菜单一起下拉，而不是将其留在顶部。

我不能将 position:absolute 与它们中的任何一个一起使用，因为当下拉菜单处于事件状态时，底部会有需要向下推的内容。

这是我的代码

HTML

<div id="lists">
 <div id="list_one">
 <a>List One</a>
  <ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
  </ol>
</div>

<div id="list_two">
 <a>List Two</a>
  <ol>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     <li>Item 4</li>
     <li>Item 5</li>
     <li>Item 6</li>
     <li>Item 7</li>
     <li>Item 8</li>
  </ol>
 </div>
</div>

CSS

#lists {
 border: 2px solid blue;
 position: relative;
 width: 300px;
}

#list_one {
 width: 100px;
 border: 2px solid red;
}

#list_one ol {
 display: none;
}

#list_two {
 width: 100px;
 border: 2px solid green;
 position: relative;
 top: -25px;
 left: 200px;
}

#list_two ol {
 display: none;
}

jQuery

$('#list_one a').click(function(){
 $('#list_one ol').toggle();
});

$('#list_two a').click(function(){
 $('#list_two ol').toggle();
});

jsfiddle:https://jsfiddle.net/e3tctuzp/

Answer 1

将两个列表在容器内左右浮动，然后将容器的显示设置为inline-block。

所以列表的 CSS 是:

#lists {
 border: 2px solid blue;
 position: relative;
 width: 300px;
 display:inline-block
}

#list_one {
 width: 100px;
 border: 2px solid red;
 float:left;
}

#list_two {
 width: 100px;
 border: 2px solid green;
 position: relative;
 float:right;
}

参见jsfiddle