<div class="masthead" onmouseleave="$('#childrenShow').css('display', 'none')">
  <div class="masthead__inner-wrap">
    <div class="masthead__menu">
      <nav id="site-nav" class="greedy-nav">
	      {% if page.lang == "cn" %}
          <a class="site-title active" href="{{ '/cn' | absolute_url }}"><img src="https://www.apache.org/img/servicecomb.png"></a>
	      {% else %}
          <a class="site-title active" href="{{ '/' | absolute_url }}"><img src="https://www.apache.org/img/servicecomb.png"></a>
	      {% endif %}
        <ul class="visible-links">
          {% for link in site.data.navigation.t[page.lang].main %}
            {% if link.url contains 'http' %}
              {% assign domain = '' %}
            {% else %}
              {% assign domain = site.url | append: site.baseurl %}
            {% endif %}
          {% assign pageUrl = page.url %}
          {% if page.lang == "cn" %}
            {% assign prefixSize =  page.url.size | minus:1 %}
            {% assign pageUrl = page.url | slice: 3, prefixSize  %}
          {% endif %}
            {% if link.children == null %}
              <li class="masthead__menu-item" onmouseenter="$('#childrenShow').css('display', 'none')">
                {% if pageUrl == '/' %}
                  {% if link.group == 'home' %}
                    <a class="active" href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
                  {% else %}
                    <a href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
                  {% endif %}

                {% elsif pageUrl == '/developers/' %}
                  {% if link.group == 'projects' %}
                    <a class="active" href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
                  {% else %}
                    <a href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
                  {% endif %}
                {% elsif pageUrl contains link.group %}
                  <a class="active" href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
                {% else %}
                  <a href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
                {% endif %}
              </li>
            {% else %}
            <li class="def-nav-li" onmouseenter="$('#childrenShow').css('display', 'block')">
              {% assign prefixSize = link.url.size | minus:1 %}
              {% assign prefix = link.url | slice: 0, prefixSize  %}
              {% if page.url contains prefix %}
                {% assign act = 'true' %}
              {% else %}
                {% for child in link.children %}
                  {% assign cSize = child.url.size | minus:1 %}
                  {% assign cPrefix = child.url | slice: 0, cSize  %}
                  {% if page.url contains cPrefix %}
                    {% assign act = 'true' %}
                  {% endif %}
                {% endfor %}
              {% endif %}

              {% if act != null %}
                <a class="active" href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
              {% else %}
                <a href="{{ domain }}{{ link.url }}">{{ link.title }}</a>
              {% endif %}

              <ul id="childrenShow" class="def-children-show-{{ page.lang }}" onmouseleave="$('#childrenShow').css('display', 'none')">
                {% for child in link.children %}
                <li><a href="{{ domain }}{{ child.url }}" class="{{ active }}">{{ child.title }}</a></li>
                {% endfor %}
              </ul>
            </li>
          {% endif %}
          {% endfor %}
        </ul>
        <button><div class="navicon"></div></button>
        <ul class="hidden-links hidden"></ul>
        <div class="nav-lang">
          {% if page.lang == "cn" %}
            {% assign raw = page.url | split: '/cn' %}
            {% assign ensite = raw[1] %}
            <a href={{ ensite }}>English</a>
          {% else %}
            {% assign cnsite = "/cn" | append: page.url %}
            <a href={{ cnsite }}>中文</a>
          {% endif %}
        </div>
      </nav>
    </div>
  </div>
</div>