当我将鼠标悬停在项目列表下方时，如何停止打开下拉菜单

问：

如果将鼠标悬停在下拉菜单项所在的任何位置，它就会显示出来。例如，在“服务”下，菜单上的最后一项是“面部”，如果您只需将鼠标悬停在“面部”按钮出现的位置，就会出现菜单。只有当您将鼠标悬停在顶部的“服务”上时，它才会出现。如何解决此问题

#main-menu {
    display:block;
    position:relative;
    float:right;
    margin:0 auto;
}
#main-menu ul {
    margin:0;
  padding: 0;
    display:block;
}
#main-menu ul li {
    position:relative;
    display:block;
    float:left;
    text-align:left;
}
#main-menu ul li a {
    color: #2f3235;
    text-decoration:none;
    display:block;
    z-index:1;
    padding:10px 25px;
    padding-left: 0;
    margin:0;
    font-weight: 500;
    -webkit-transition: color .1s linear, background-color .1s linear;
    -moz-transition: color .1s linear, background-color .1s linear;
    -o-transition: color .1s linear, background-color .1s linear;
    transition: color .1s linear, background-color .1s linear;
    position:relative;
    line-height:40px;
}
#main-menu a:hover,
#main-menu ul li a:hover,
#main-menu li:hover > a,
#main-menu a:focus,
#main-menu ul li a:focus,
#main-menu li.focus > a,
#main-menu li:focus > a,
#main-menu ul li.current-menu-item > a,
#main-menu ul li.current_page_item > a,
#main-menu ul li.current-menu-parent > a,
#main-menu ul li.current_page_ancestor > a,
#main-menu ul li.current-menu-ancestor > a {
    color:#fc4075;
}
#main-menu ul.children ,
#main-menu ul.sub-menu {
    opacity:0;
    position: relative;
    top: 50px;
    left: 0;
    background:#fff;
    z-index:10001;
    width:213px;
    padding-left:0;
    -webkit-transition: opacity 0.3s ease 0s;
    -moz-transition: opacity 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s;
    transition: opacity 0.3s ease 0s;
    box-shadow: 0px 5px 30px rgb(0 0 0 / 13%);
  border-radius: 3px;
}
#main-menu ul.children li ,
#main-menu ul.sub-menu li {
    display:block; 
  position:relative; 
  float:none; 
  line-height:18px; 
  margin-left:0; 
  margin-right:0; 
  -webkit-transform: skew(0deg); 
  -ms-transform: skew(0deg); 
  transform: skew(0deg);
  padding: 5px 10px;
}
#main-menu li li:hover > ul,
#main-menu li li:focus > ul,
#main-menu li li.focus > ul {
    top:0px;
    left: -100%;
}

#main-menu ul.children li a ,
#main-menu ul.sub-menu li a {
    display: block;
  position:relative;
  padding: 0px 14px;
  padding-right: 14px;
  font-size: 14px;
    color: #767c83;
    -webkit-transition: 
    all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
    cursor: pointer;-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#main-menu ul.sub-menu li a:hover {
    color: #fff;
    -webkit-transition-delay: .6s;
    transition-delay: .6s;
}
#main-menu ul.sub-menu li a:before, #main-menu ul.sub-menu li a:after {
    content: '';
    position: absolute;
    -webkit-transition: 
    inherit;transition: 
    inherit;z-index: -1;
}
#main-menu ul.sub-menu li a:before, #main-menu ul.sub-menu li a:after {
    top: 0;
    width: 0;
    height: 100%;}

#main-menu ul.sub-menu li a:before {
    left: 0;
    border: 1px solid #fc4075;
    border-left: 0;
    border-right: 0;}
#main-menu ul.sub-menu li a:hover:before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
#main-menu ul.sub-menu li a:hover:before,
 #main-menu ul.sub-menu li a:hover:after {
    width: 100%;
 }
#main-menu ul.sub-menu li a:after {
    right: 0;
}
#main-menu ul.sub-menu li a:hover:after {
    background: #fc4075;
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}
#main-menu ul.sub-menu li a:hover:before, #main-menu ul.sub-menu li a:hover:after {width: 100%;}
#main-menu ul.children li ul:before ,
#main-menu ul.sub-menu li ul:before {
    display:none;
}
#main-menu li:hover > ul,
#main-menu li:focus > ul,
#main-menu li.focus > ul {
    opacity:1;
    right:calc(100% - 213px);
}
.menu-toggle,
.dropdown-toggle,
button.close-menu {
    display: none;
    background: #fc4075;
    color: #fff;
}
#main-menu ul.children li ul:before ,
#main-menu ul.sub-menu li ul:before {
    display:none;
} 

我没有在网上找到任何有用的信息来提供帮助。