下拉使元素移动

Question

所以我使用ul和li创建了我自己的下拉菜单，这样可以正常工作，但如果我有display: inline-block的元素，那么当用户点击时这些元素也会被移动下拉菜单。

我有办法阻止这个吗？

感谢任何帮助

这是我的代码：

$('.dropdown').click( function(e) {
  e.preventDefault();
  $('.dropdown-item').toggleClass('active');
});


$('.dropdown-item').click( function() {
  $(this).parent().children('p').text($(this).text());
});

.form-group {
  text-align: center;

  input {
    display: inline-block;
    width: 25%;
    border-radius: 0;
    border: none;
    height: 45px;
    text-align: left;
  }

  .dropdown {
    display: inline-block;
    list-style: none;
    cursor: pointer;
    background-color: $white;
    width: 25%;
    padding-left: 0;
    padding: 12px;
    margin-top: 10px;
    text-align: left;
    @include transition(all, .3s, ease-in-out);

    p {
      padding: 0;
      margin: 0;
      font-size: 14px;
    }

    i {
      position: absolute;
      right: 20px;
      top: 13px;
    }

    li {
      padding: 5px;
      display: none;

      &:first-child {
        margin-top: 20px;
      }

      &:hover {
        background-color: darken($white, 5%);
      }
    }

    .active	{
      display: block;
    }
  }

  .btn-search {
    display: inline-block;
    border-radius: 0;
    color: white;
    padding: 8px 40px;
    font-size: 19px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <input type="text" name="post-code" value="" size="40" class="form-control" id="postcode" placeholder="Enter your post code">
  <ul class="dropdown"><P>Dropdown</P><i class="fa fa-chevron-down"></i>
    <li class="dropdown-item">Item 1</li>
    <li class="dropdown-item">Item 2</li>
    <li class="dropdown-item">Item 3</li>
  </ul>
  <a class="btn btn-search" href="#" style="background-color: #24638d">Search</a>
</div>

Answer 1

您的HTML无效，您可以将您的列表转换为子列表或使用ul前面的标题。

子列表可以处于绝对位置，因此不会推送任何内容。

＆＃13;

＆＃13;

ul ul {
  position: absolute;
  display: none;
}
li:hover ul {
  display: block;
}

＆＃13;

<ul class="dropdown">
  <li>Dropdown<i class="fa fa-chevron-down"></i>
    <ul>
      <li class="dropdown-item">Item 1</li>
      <li class="dropdown-item">Item 2</li>
      <li class="dropdown-item">Item 3</li>
    </ul>
  </li>
</ul>
<p>text underneath list</p>

＆＃13;

＆＃13;

＆＃13;