以下是一个保存菜单状态的CSS解决方案，使用手风琴菜单，并且没有使用jQuery：

HTML代码示例：

  

    
菜单1
    

      菜单1的内容
    
  
  

    
菜单2
    

      菜单2的内容
    
  
  

    
菜单3
    

      菜单3的内容
    
  

CSS代码示例：

.accordion {
  max-width: 300px;
}

.accordion-item {
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f2f2f2;
  padding: 10px;
  cursor: pointer;
}

.accordion-content {
  padding: 10px;
  display: none;
}

.accordion-content.active {
  display: block;
}

JavaScript代码示例：

var accordionHeaders = document.querySelectorAll('.accordion-header');

accordionHeaders.forEach(function(header) {
  header.addEventListener('click', function() {
    var accordionContent = this.nextElementSibling;
    if (accordionContent.style.display === 'block') {
      accordionContent.style.display = 'none';
    } else {
      accordionContent.style.display = 'block';
    }
  });
});

// 保存菜单状态
document.addEventListener('DOMContentLoaded', function() {
  var accordionContents = document.querySelectorAll('.accordion-content');
  accordionContents.forEach(function(content) {
    if (content.classList.contains('active')) {
      content.style.display = 'block';
    }
  });
});

这个解决方案通过给每个菜单项的标题添加点击事件监听器，实现展开和收起菜单的效果。在菜单状态保存方面，我们使用了一个名为"active"的类来标记当前展开的菜单项，在页面加载完毕时，遍历所有的菜单内容，如果包含"active"类，则将其显示出来。