顯示兩個相鄰的下拉列表

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

在容器內左右浮動兩個列表，然後將容器的顯示設置爲內嵌塊。

所以對於列表中的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

Answer 2

而不是設置列表中的位置爲相對的，你可以讓他們漂浮。儘管如此，你需要在＃列表中設置overflow: auto。然後，您可以將一個列表浮動到左側，並將右側列出兩個列表。這將是這個樣子：

#list_one { 
    ... 
    float: left; 
} 

#list_two { 
    ... 
    float: right; 
} 
#lists { 
    overflow: auto; 
} 

這是你編輯的提琴：https://jsfiddle.net/e3tctuzp/2/