css3实现双语导航

双语导航是现代网站设计中必不可少的功能之一。在CSS3中，我们可以很方便地实现双语导航。

首先，在HTML中我们需要为双语导航部分添加一个类名，比如说是“language-nav”，然后我们需要为其添加两个子元素，分别是中文导航和英文导航：

<nav class="language-nav">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

接着，在CSS中我们需要对“language-nav”进行布局。我们可以使用flex来实现主导航和副导航的对齐。同时，我们还需要设置副导航的display为none，并添加一个:hover伪类，用于显示出副导航：

.language-nav {
  display: flex;
  justify-content: center;
}
.language-nav ul:first-of-type {
  margin-right: 20px;
}
.language-nav ul:last-of-type {
  display: none;
}
.language-nav:hover ul:last-of-type {
  display: flex;
}

最后，在JavaScript中，我们需要为主导航和副导航的每个li元素分别添加一个mouseenter事件和mouseleave事件，并在事件中切换副导航的显示和隐藏：

var primaryNav = document.querySelectorAll('.language-nav ul:first-of-type li');
var secondaryNav = document.querySelectorAll('.language-nav ul:last-of-type li');
for (var i = 0; i < primaryNav.length; i++) {
  primaryNav[i].addEventListener('mouseenter',function() {
    var index = Array.prototype.indexOf.call(this.parentElement.children,this);
    secondaryNav[index].classList.add('show');
  });
  primaryNav[i].addEventListener('mouseleave',this);
    secondaryNav[index].classList.remove('show');
  });
}

这样，双语导航就实现了！