点击导航链接后CSS侧菜单未返回原始状态

请帮忙！！！！我包括一个链接到一个我想为我正在建设的网站使用的菜单页面。我似乎不知道如何让“.menu outer”在我点击导航中的链接后重新定位。我尝试了各种代码组合，但没有可用的。有人能帮忙吗

菜单有一个悬停效果，可以前后移动菜单，但我也希望链接允许菜单在单击页面链接后缩回

---

谢谢你

你从来没有提到过使用Javascript，但这里有一个版本，使用它关闭菜单一次，然后单击该项（注意：从下面的url对css做了一点小小的更改）：

---

好的，所以它可以在该站点上运行，但不能在我的浏览器中运行。我把所有东西都照搬了。我正在使用谷歌浏览器，也在Safari和Firefox中进行了测试。导航已完全禁用。但它仍在cssdeck.com上运行。我忘了在css中提到，将

.menu outer:hover

更改为

.menu outer.active

是的，我注意到它在我的浏览器中不起作用。你提供给我的链接非常完美。当我复制并粘贴它时，无论是悬停还是单击菜单按钮，菜单都不会打开。意识到我的脚本链接中缺少了一个字符。很好。再次感谢。

var menu = document.querySelector('.menu-outer');
var links = document.querySelectorAll('nav ul li a');

var addClass = function(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    removeClass(element, className);
    element.className = (element.className + ' ' + className).replace(/^\s/, '');
  }
};

var removeClass = function(element, className) {
  if (className.indexOf('*') !== -1) {
    var aryClasses = element.className.split(' ');

    for (var i = 0; i < aryClasses.length; i++) {
      if (aryClasses[i].indexOf(className.replace('*', '')) !== -1) {
        element.removeClass(aryClasses[i]);
      }
    }
  } else {
    if (element.classList) {
      element.classList.remove(className);
    } else {
      element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
  }
};

var open = function() {
  console.log('opening');
  addClass(menu, 'active');
};

var close = function() {
  console.log('closing');
  removeClass(menu, 'active');
};

if (menu) {
  menu.addEventListener('mouseover', open, false);
  menu.addEventListener('mouseout', close, false);

  for (var l = 0; l < links.length; l++) {
    var link = links[l];
    link.addEventListener('click', close, false);
  }
}

$('body').on('click', 'nav ul li a', function() {
  $('.menu-outer').removeClass('active');
});

$('body').on('mouseover', '.menu-outer', function() {
  $(this).addClass('active');
});

$('body').on('mouseout', '.menu-outer', function() {
  $(this).removeClass('active');
});