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/

另一种方法是将列表置于绝对位置，这样就不会影响下面的内容。但是在这种情况下，当我将光标移出“标题”时（与第一个小提琴相反），列表就像子弹一样消失。

以下是第二个示例https://jsfiddle.net/8L6ojqLm/

什么是一个解决方案，使列表的行为像1中一样，同时不影响其他内容，如2？

Answer 1

难道不能通过纯css完成吗？

https://www.w3schools.com/howto/howto_css_dropdown.asp

Answer 2

也许这会有所帮助。

.navigation {
  width: 100%;
}
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mainmenu a {
}
.mainmenu a:hover {
    background-color: #D90000;
}
.mainmenu li:hover .submenu {
  display: block;
  max-height: 400px;
}
.submenu{
  max-height: 400px;
}
.submenu a {
  background-color: #FF4D4D;
}
.submenu a:hover {
  background-color: #D90000;
}
.submenu{
  overflow:hidden;
  display:none;
}

<nav class="navigation"><!-- pocetak navigacije -->
  <ul class="mainmenu">
    <li><a href="">Link</a></li>
    <li class="start"><a href="#ar">Link</a>
      
      <ul class="submenu">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>
      
    </li>
	<li><a href="">Home</a></li>
	</ul>
</nav>

Answer 3

接受CBroe的评论：问题似乎是元素与元素之间的“差距”。要删除它，你可以

给“item”-Element一个高度，使它“向下”到ul元素或
或删除ul-element

Answer 4

你不能使用JS

实施例

＆＃13;

.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;
}

＆＃13;

<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">

＆＃13;

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

当子项绝对定位时，父项上的Mouseenter事件

4 个答案: