https://vps.wangsheyuan.vip:8086/
<style>
ul.right_nav {list-style: none;}
.right_nav{ right:0; top:170px; position:fixed; text-align:left;overflow: hidden;z-index:999;}
.right_nav li{background:#c9a885;margin:4px 0;padding: 10px 5px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;cursor:pointer;position:relative; right: -100px;}
.right_nav li .iconBox{text-align: center;overflow: hidden;display: flex;align-items: center;justify-content: space-between;}
.right_nav li img{width: 20px;height:20px;}
.right_nav li h4{color: #fff;font-size:14px;margin:2px 0;margin-left: 10px;}
.right_nav li:hover{background:#b99168}
.right_nav li .hideBox{display: none;position: absolute;right:0;padding:10px 0; top:40px;z-index:999999;}
.right_nav li .hideBox .hb{border: 1px solid #ccc;background-color: #fff; padding: 10px 19px;border-top: 2px solid #c9a885;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;}
.right_nav li .hideBox .hb h5{padding: 5px 0;border-bottom: 2px solid #ccc;color: #c9a885;font-size: 16px;font-weight: 400;display: block;white-space: nowrap;}
.right_nav li .hideBox .hb p {margin-top: 5px;font-size: 18px;font-weight: 700;}
.right_nav li .hideBox .hb .lang{margin-top: 10px;}
.right_nav li .hideBox .hb .lang a{display: flex;align-items: center;line-height: 32px;}
.right_nav li .hideBox .hb .lang img{width: 25px;height:25px;}
.right_nav li .hideBox .hb .lang p{font-size: 14px;font-weight: 400;white-space: nowrap;margin-top: -5px;margin-left: 5px;}
.right_nav li:nth-child(3) .hideBox img{width:140px;height: 140px;margin-top: 10px;}
</style>
<ul class="right_nav">
<li>
<div class="iconBox oln_ser">
<img src="source/plugin/pn_translate/static/lang.png"> 
<h4>&#20013;&#25991;&#65288;&#39321;&#28207;&#65289;</h4>
</div>
<div class="hideBox">
<div class="hb">
<h5>&#20999;&#25442;&#35821;&#35328;</h5>
<div class="lang">
<a href="https://bbs.didaoba.cn/thread-148-1-1.html?lang=zh">
<p>&#21407;&#25991;&#12288;&#12288;&#12288;&#12288;</p>
</a>
<a href="https://bbs.didaoba.cn/thread-148-1-1.html?lang=zh-cn">
<p>&#20013;&#25991;&#65288;&#31616;&#20307;&#65289;</p>
</a>
<a href="https://bbs.didaoba.cn/thread-148-1-1.html?lang=zh-hant">
<p>&#20013;&#25991;&#65288;&#32321;&#39636;&#65289;</p>
</a>
<a href="https://bbs.didaoba.cn/thread-148-1-1.html?lang=zh-tw">
<p>&#20013;&#25991;&#65288;&#21488;&#28771;&#65289;</p>
</a>
<a href="https://bbs.didaoba.cn/thread-148-1-1.html?lang=zh-hk">
<p>&#20013;&#25991;&#65288;&#39321;&#28207;&#65289;</p>
</a>
</div>
</div>
</div>
</li>
</ul>
<script src="static/js/mobile/jquery.min.js?T6t" type="text/javascript"></script>
<script type="text/javascript">
jQ=jQuery.noConflict();
   (function(jq){
jq(function () {
    var offset_top = jq('.right_nav').offset().top;
    var begin = 0,
       end = 0,
       timer = null;
   if (jq(window).height() < jq(document).height() ){
jq('.right_nav li:last').hide(); 
      }
    jq(window).scroll(function (evt) {
       clearInterval(timer);
       var scroll_top = jq(window).scrollTop();
       end = offset_top + scroll_top;
       scroll_top > -1 ? jq('.right_nav li:last').fadeIn() : jq('.right_nav li:last').fadeOut();

       timer = setInterval(function () {
          begin = begin + (end - begin) * 0.2;
          if (Math.round(begin) === end) {
             clearInterval(timer);
          }
       }, 10);
    });
 });

 var right_nav = jq(".right_nav");
 var tempS;
 jq(".right_nav").hover(function () {
       var thisObj = jq(this);
       tempS = setTimeout(function () {
          thisObj.find("li").each(function (i) {
             var tA = jq(this);
             setTimeout(function () {
                tA.animate({
                   right: "0"
                }, 200);
             }, 50 * i);
          });
       }, 200);
    },
    function () {
       if (tempS) {
          clearTimeout(tempS);
       }
       jq(this).find("li").each(function (i) {
          var tA = jq(this);
          setTimeout(function () {
             tA.animate({
                right: "-100"
             }, 200, function () {});
          }, 50 * i);
       });
    });

 jq(".right_nav li").each(function (i) {
    if (i == 0) {
       jq(this).mouseover(function () {
          jq(this).children(".hideBox").stop().fadeIn();
          right_nav.css('overflow', 'visible')
       });
       jq(this).mouseout(function () {
          jq(this).children(".hideBox").hide();
          right_nav.css('overflow', 'hidden')
       });
    }
 })	
})(jQ);

</script>
</body></html>