仿select样式实现二级选择

<div class="customerServiceSelect">
    <div class="customerServiceName"><span>请选择</span><i class="customerServiceIcon"></i></div>
    <div class="customerServiceSelectLi" style="display:none">
        <div class="customerInsideLi">
            <div class="customerInsidePos">
                <span class="rGroupName">全部</span>
            </div>
        </div>
        <div class="customerInsideLi">
            <div class="customerInsidePos">
                <span class="rGroupName">分组1</span><span class="moreImg"><img src="../img/checkbox.png" alt="img"></span>
                <ul class="customerInsideTwo" style="display: none;">
                    <li>二级1</li>
                    <li>二级2</li>
                </ul>
            </div>
        </div>
        <div class="customerInsideLi">
            <div class="customerInsidePos">
                <span class="rGroupName">分组2</span><span class="moreImg"><img src="../img/checkbox.png" alt="img"></span>
                <ul class="customerInsideTwo" style="display: none;">
                    <li>二级1</li>
                    <li>二级2</li>
                </ul>
            </div>
        </div>
    </div>
</div>

.customerServiceSelect {
  height: 28px;
  line-height: 28px;
  text-indent: 4px;
  border: 1px solid #e3e4e9;
  color: #999;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.customerServiceName {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.customerServiceIcon {
  background: url(../img/htl.png) 0px 0px no-repeat;
  width: 12px;
  height: 8px;
  margin-right: 4px;
}
.customerServiceSelectLi {
  position: absolute;
  top: 28px;
  width: 50%;
  border: 1px solid #e3e4e9;
  color: #999;
  background: #fff;
  left: -1px;
  z-index: 9999;
}
.customerInsideLi {
  display: flex;
  position: relative;
}
.customerInsideLi:hover,
.customerInsideTwo li:hover {
  background: #1e90ff;
  color: #fff;
}
.customerInsidePos {
  position: relative;
  width: 100%;
}
.rGroupName {
  float: left;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.moreImg {
  display: block;
  width: 20%;
  float: right;
}
.customerInsideTwo {
  position: absolute;
  left: 100%;
  background: #fff;
  border: 1px solid #e3e4e9;
  color: #999;
  top: 9px;
  width: 99%;
  z-index: 9999;
}

$("body").on("mouseover", ".customerServiceSelect", function () {
    $(this).children(".customerServiceSelectLi").show();
});
$("body").on("mouseout", ".customerServiceSelect", function () {
    $(this).children(".customerServiceSelectLi").hide();
});
$(".customerInsideLi").on("mouseover", function (e) {
    $(this).children().children("ul.customerInsideTwo").show();
}).on("click", function () {
    $(".customerServiceName").children("span").text($(this).children().children("span.rGroupName").text());
});
$("body").on("mouseout", ".customerInsideLi", function () {
    $(this).children().children("ul.customerInsideTwo").hide();
});
$("body").on("click", ".customerInsideTwo li", function () {
    $(".customerServiceName").children("span").text($(this).text());
});