为什么我的下拉菜单会移动下面与兄弟姐妹的所有主要链接？

Question

我有一个非常简单的CSS / JS下拉菜单。问题是，当我点击select1时，选择2和3也会下拉其余的子链接。 http://codepen.io/donnaloia/pen/GqiKl 这显示了我正在谈论的内容。我该如何解决？

HTML

<div class='dropdown'>
  <h1 class='title'>Select1</h1>
  <ol class='drop'>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
    <li>Pineapple</li>
    <li>Mango</li>
  </ol>
</div>

<div class='dropdown'>
  <h1 class='title'>Select2</h1>
  <ol class='drop'>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
    <li>Pineapple</li>
    <li>Mango</li>
  </ol>
</div>


<div class='dropdown'>
  <h1 class='title'>Select3</h1>
  <ol class='drop'>
    <li>Apple</li>
    <li>Orange</li>
    <li>Banana</li>
    <li>Pineapple</li>
    <li>Mango</li>
  </ol>
</div>

CSS

.dropdown {
  position: relative;
  margin: 50px auto;
  display: table;
  font-family: sans-serif;
  font-size: 11pt;
  color: #FC3;
  line-height: normal;
  text-align: left;
  font-smoothing: antialiased;
}
.dropdown .title {
  cursor: pointer;
  height: 45px;
  padding: 0 20px;
  border-radius: 5px;
  display: block;
  box-shadow: 0 0 0 1px #FC3;
  line-height: 45px;
}
.dropdown .title:after {
  content: '';
  float: right;
  width: 0;
  height: 0;
  margin: 20px 0 0 20px;
  border-width: 5px 4px 0;
  border-style: solid;
  border-color: #FC3 transparent transparent transparent;
}
.dropdown .drop {
  position: relative;
  top: 100%;
  margin-top: 1px;
  border-radius: 0 0 5px 5px;
  display: none;
  overflow: hidden;
  box-shadow: 0 0 0 1px #FC3;
}
.dropdown .drop li {
  cursor: pointer;
  padding: 10px;
}
.dropdown .drop li:hover {
  background: #FC3;
  color: #FFF;
}

.select .title {
  border-radius: 5px 5px 0 0;
}
.select .title:after {
  transform: rotate(180deg);
}

JS

$('.dropdown .title').on('click',function(){
  $(this).parent().toggleClass('select').find('.drop').toggle();
});
$('.dropdown .drop li').on('click',function(){
  var $this = $(this), input = $this.text();
  $('.dropdown .title').text(input);
});

Answer 1

难以代替float: left这些div吗？这样您就不必担心内联块的行为。

http://codepen.io/anon/pen/mKyfD