Button group of layui drop-down menu, click and mouse over to display sub-menu

<script type="text/html" id="toolbar">
  <div class="layui-btn-container" style="display:flex">
       
        <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" shiro:hasPermission="stPurchaseFareH:delete">
            删除
        </button>
        <ul class="layui-nav layui-btn btnz" lay-filter="" style="font-size: 12px;border-radius: 4px;float: right;padding:0px 0px 0px 0px;margin-left: 2px;height:32px">
            <li class="layui-nav-item" style="line-height: 30px;font-size: 12px;">
                <a  style="color:white;font-size: 12px;padding: 2px 30px 3px 20px;letter-spacing:1px;width:88px" id="exportClick"> + 新增<span class="layui-nav-more" style="right: 10px;font-size: 12px;" ></span></a>
                <dl class="layui-nav-child" style="top: 30px;line-height: 30px;width:168px;background-color:#fff ;border:white" id="exportEncrypt"> <!-- 二级菜单 -->
                    <dd>
                        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid" style="width:168px;margin-bottom:0;border-radius: 0px;"  lay-event="addNC" shiro:hasPermission="stPurchaseFareH:add">菜单一</button>
                    </dd>
                    <dd>
                        <button class="layui-btn layui-btn-normal layui-btn-sm layui-btn-fluid"style="width:168px;margin-bottom:0;border-radius: 0px;" lay-event="add" shiro:hasPermission="stPurchaseFareH:add">菜单二</button>
                    </dd>
                </dl>
            </li>
        </ul>
    </div>
</script>

Method 1: Click the display button:

  //组合按钮
   $("#exportClick").click(function(e) {
    
    
   $("#exportEncrypt").toggle();
  });

Method 2: Mouse over the display button

 $('#exportClick').hover(  //鼠标滑过导航栏目时

      function(){
    
    
        $('#exportEncrypt').show();  //显示下拉列表
        //设置导航栏目样式
        $(this).css({
    
    'color':'red','background-color':'orange'}); 
       },

      function(){
    
    
        $('#exportEncrypt').hide();  //鼠标移开后隐藏下拉列表
        }
  );
 $('#exportEncrypt').hover(  //鼠标滑过下拉列表自身也要显示，防止无法点击下拉列表

      function(){
    
    
       $('#exportEncrypt').show();
      },
      function(){
    
    
       $('#exportEncrypt').hide();
        //鼠标移开下拉列表后，导航栏目的样式也清除
       $('#exportClick').css({
    
    'color':'white','background-color':'blue'}); 
       }
 );