自动隐藏和显示列表项

如何解决自动隐藏和显示列表项

我很难使它正常工作。我希望将鼠标悬停在“出租”上以显示“属性”子菜单，然后允许我在子菜单项中向下单击以单击所需的子菜单。问题是，当我尝试将鼠标悬停在“属性”链接上时，子菜单消失了。

以下是菜单的图片：

很明显，我搞砸了，但我想不通……任何帮助将不胜感激。

这里有HTML：

<ul class="menu" id="menu-menu">    
    <li id="ML_2" class="menu-item">
        <a class="button" href="#">
            <div class="title">Rentals</div>
            <div class="arrow">
                <i class="fa fa-chevron-up"></i>
            </div>
            <div class="icon">
                <div class="L_RENTALS"></div>
            </div>
        </a>
                                            
        <ul class="dropdown-menu" top: 130px; display: none;">
            <li class="menu-item" id="L_PROPERTIES" ><a href="#">Properties</a></li>
            <li class="menu-item" id="L_AVAILABILITY_CALENDAR"><a href="#">Availability Calendar</a></li>
        </ul>
    </li> 
<ul>    

CSS：

#menu-menu li ul {
    display: none;
}
#menu-menu li ul li a {
    display: block;
    background: none;
    padding: 10px 0px;
    padding-left: 15px;
    font-size: 11px;
    color: #424242;
    text-align: left;
    text-decoration: none;
    font-weight: bold;
}

#menu-menu li ul li a:hover {
    background: #dfdcdc;
}


a.button  div.icon div {background-position-x: 0px;
    border:0;
    background-position-y: 0px;
    background-size: 30px;
    background-position: 0;

    float: right;
    padding-right: 10px;
    width: 30px;
    height: 30px;

}

.menu-item div.title{width:100px;float:left;text-align:left;}
.menu-item div.arrow{width:20px;float:left;}
.menu-item div.icon{padding-left: 20px;}

JavaScript / jquery：

$("#menu-menu li").on("mouseenter",function (e) {
    
    //hide other submenus that may be open
    $(".dropdown-menu").hide();
    
    var elePos = $(this).position();
    $(this).find("ul").css({"top":elePos.top+79});
    $(this).find("ul").show();
});

解决方法

这是您要实现的目标吗？

$("#menu-menu > .menu-item").on("mouseenter",function(e) {

  //hide other submenus that may be open
  $(".dropdown-menu").hide();

  var elePos = $(this).position();
  $(this).find("ul").css({
    "top": elePos.top + 79
  });
  $(this).find(".dropdown-menu").show();
});

$("#menu-menu > .menu-item").on("mouseleave",function(e) {
  $(this).find(".dropdown-menu").hide();
});

#menu-menu li ul {
  display: none;
}

#menu-menu li ul li a {
  display: block;
  background: none;
  padding: 10px 0px;
  padding-left: 15px;
  font-size: 11px;
  color: #424242;
  text-align: left;
  text-decoration: none;
  font-weight: bold;
}

#menu-menu li ul li a:hover {
  background: #dfdcdc;
}

a.button div.icon div {
  background-position-x: 0px;
  border: 0;
  background-position-y: 0px;
  background-size: 30px;
  background-position: 0;
  float: right;
  padding-right: 10px;
  width: 30px;
  height: 30px;
}

.menu-item div.title {
  width: 100px;
  float: left;
  text-align: left;
}

.menu-item div.arrow {
  width: 20px;
  float: left;
}

.menu-item div.icon {
  padding-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu" id="menu-menu">
  <li id="ML_2" class="menu-item">
    <a class="button" href="#">
      <div class="title">Rentals</div>
      <div class="arrow">
        <i class="fa fa-chevron-up"></i>
      </div>
      <div class="icon">
        <div class="L_RENTALS"></div>
      </div>
    </a>

    <ul class="dropdown-menu" style="top: 130px; display: none; ">
      <li class="menu-item " id="L_PROPERTIES "><a href="# ">Properties</a></li>
      <li class="menu-item " id="L_AVAILABILITY_CALENDAR "><a href="# ">Availability Calendar</a></li>
    </ul>
  </li>
</ul>