css - 当 child 绝对定位时， parent 的 Mouseenter 事件

Question

我想做一个简单的下拉菜单，它会在鼠标悬停在某个元素上时触发，只要光标在该元素上或在下拉列表上就会保持事件状态。

示例代码:

HTML

<div class="header">
  <div class="items">
    <div class="item">
       <span>Caption</span>
    </div>
    <ul class="items_hidden">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
  </div>
</div>
<input type="text">

CSS

.items {
    float: right;
    position: relative;
}
.item {
    text-align: right;
}
.items_hidden {
    display: none;
    margin-top: 7px;
    list-style: none;
    z-index: 2000;
    width: 80px;
    border: 1px solid #f2f2f2;
    text-align: left;
    padding: 10px;
    color: #333;
    line-height: 30px;
    border-bottom: 3px solid #f2f2f2;

}

input {
  width: 100%;
}

JS

$(function() {
    $('.items').on('mouseenter', function(e) {
        $('.items_hidden').show();
    });

    $('.items').on('mouseleave', function(e) {
        $('.items_hidden').hide();
    });

});

当下拉列表相对定位时，我可以正常工作，但问题是一旦显示列表，它会导致所有后续内容向下移动。

这是一个例子:https://jsfiddle.net/2ya06aLo/

另一种方法是绝对定位列表，这样它就不会影响下面的内容。但在那种情况下，一旦我将光标移出“Caption”(与第一个 fiddle 相反)，列表就会消失。

这是第二个例子https://jsfiddle.net/8L6ojqLm/

有什么解决方案可以使列表表现得像 1 中那样，同时又不会像 2 中那样影响其余内容？

Answer 1

你可以不用JS

例子

.items {
    float: right;
    position: relative;
}
.item {
    text-align: right;
	padding: 10px;
}
.items_hidden {
    position: absolute;
    right: 0;
	top: 20px;
    display: none;
    margin-top: 7px;
    list-style: none;
    z-index: 2000;
    width: 80px;
    border: 1px solid #f2f2f2;
    text-align: left;
    padding: 10px;
    color: #333;
    line-height: 30px;
    border-bottom: 3px solid #f2f2f2;

}

input {
  width: 100%;
}

.items:hover .items_hidden{
	display: block;
}

<div class="header">
<div class="items">
  <div class="item">
      <span>Caption</span>
  </div>
  <ul class="items_hidden">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
  </ul>
 
</div>
</div>
 <input type="text">

实时 JSFiddle - https://jsfiddle.net/grinmax_/8L6ojqLm/1/